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%)。

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

相关推荐
涛涛ing6 分钟前
React 19.3 发布,但真正的赢家是 StyleX:当 AI 成为框架的“第一用户”
前端
zhangminghuan35 分钟前
Vue vs React 实战拓展面试题|摒弃基础八股,聚焦业务开发核心难点(2026前端进阶)
前端
IT_陈寒1 小时前
Redis主从切换竟让业务卡了3秒?这个坑我替你踩了
前端·人工智能·后端
天若有情6731 小时前
独立开发复盘:我用 Node.js 做了个在线工具箱
前端·json·工具
xieliyu.1 小时前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
zttbee1 小时前
前端测试内容
前端
2603_965896621 小时前
async/await|JS同步写法解决异步终极方案
前端·javascript
A24207349303 小时前
TCP 三次握手与四次挥手:从原理到状态机一次讲清
前端
GreenTea10 小时前
GrokBot 核心成员 Lauren Tan:每月交付 2000 个 PR 的人,是怎么用 AI 的
前端·后端·架构
mCell12 小时前
用 Knip 清理 AI Coding 留下的冗余代码
前端·ai编程·前端工程化