css专题1-----给div盒子的边框添加阴影

原div盒子的css代码为:

python 复制代码
padding: 0 20upx;
border: 1px solid #F0F0F0;
box-sizing: border-box;
border-radius: 5upx;

要为边框(border)添加阴影,您可以使用 box-shadow 属性。根据您给出的样式,您可以在现有的 CSS 代码中添加这一属性。以下是修改后您的代码以包含阴影效果:

python 复制代码
margin: 18upx 28upx;
padding: 0 20upx;
border: 1px solid #F0F0F0;
box-sizing: border-box;
border-radius: 5upx;
box-shadow: 0 2upx 5upx rgba(0, 0, 0, 0.1); /* 增加阴影效果 */

参数解释:

  • 0:阴影在水平方向上的偏移量(在这里为0,意味着阴影不会向左或右偏移)。
  • 2upx:阴影在垂直方向上的偏移量(在这里为2upx,意味着阴影向下偏移2upx)。
  • 5upx:阴影的模糊半径(模糊效果,数值越大则阴影越模糊)。
  • rgba(0, 0, 0, 0.1):阴影的颜色和透明度(这里是黑色,透明度为10%)。

您可以根据需要调整这些值来获得您想要的效果。

相关推荐
陈随易3 小时前
Postman 被曝自动往 Claude Code 和 Codex 装插件
前端·后端·程序员
Csvn6 小时前
性能监控
前端
Csvn6 小时前
构建工具
前端
FRing037 小时前
vue2干货总结3(computed计算属性、watch监听器)
开发语言·前端·vue.js·vue2
kyriewen9 小时前
Skills 榜前 10 我全装了:只有 3 个能直接用
前端·javascript·程序员
IT_陈寒9 小时前
当Java的hashCode遇上Lombok,我的缓存被全清了
前端·人工智能·后端
工控丫丫9 小时前
帆软看板中经常使用的公式函数及经常搭的组合
前端·javascript·数据库
jerrywus10 小时前
我用 GPT-6.1-sol 做了台会讲解的 3D 售货机:60 罐饮料,一口没喝上
前端·agent·claude
孟陬11 小时前
Foobar 技术周刊#159:当看不懂代码时,如何高效排障调试。脏页陷阱:一条只读查询,写入数 TB 数据。推测解码:大模型加速利器
前端·人工智能·后端
Zhao-Jichao11 小时前
AI Prompting for Everyone 课程笔记 - P17 图像生成 Imaging Generation
前端