css 四周阴影

作者：ˉ吻干迩的'泪发布日期:2026-05-29 浏览:48

/* css 四周阴影示例代码 */

.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* 水平偏移量 垂直偏移量 模糊半径 颜色 */
}

解释说明：

box-shadow 属性用于给元素添加阴影效果。
- 第一个值 10px 是水平偏移量，表示阴影在水平方向上的偏移距离。正值向右偏移，负值向左偏移。
- 第二个值 10px 是垂直偏移量，表示阴影在垂直方向上的偏移距离。正值向下偏移，负值向上偏移。
- 第三个值 15px 是模糊半径，值越大阴影越模糊。
- 最后一个值 rgba(0, 0, 0, 0.3) 是阴影的颜色和透明度，这里使用了黑色并设置了 30% 的透明度。

你可以根据需要调整这些值来改变阴影的效果。

上一篇：css 文字边框

下一篇：opacity在css中的用法