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

上趣工作室2025-04-10 11:46

原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%）。

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