css 外阴影

作者：戮尽逆者发布日期:2026-07-01 浏览:31

/* 外阴影示例代码 */
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  /* 参数解释：水平偏移量 | 垂直偏移量 | 模糊半径 | 扩展距离 | 颜色 */
  box-shadow: 10px 10px 15px 5px rgba(0, 0, 0, 0.3);
}

这段代码创建了一个带有外阴影效果的方块。box-shadow 属性的参数依次为：

水平偏移量（10px）：阴影在水平方向上的偏移量，正值向右，负值向左。
垂直偏移量（10px）：阴影在垂直方向上的偏移量，正值向下，负值向上。
模糊半径（15px）：阴影的模糊程度，值越大越模糊。
扩展距离（5px）：阴影的扩展或收缩距离，正值扩展，负值收缩。
颜色（rgba(0, 0, 0, 0.3)）：阴影的颜色，这里使用了RGBA颜色模式，最后一个值是透明度（0到1之间）。

上一篇：css 美化

下一篇：css字体垂直居中