box-shadow 属性

box-shadow 属性用于为元素添加阴影效果。它有多个值，用逗号分隔。以下是 box-shadow 属性的语法：

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：阴影的水平偏移量。正值向右偏移，负值向左偏移。
• v-shadow：阴影的垂直偏移量。正值向下偏移，负值向上偏移。
• blur：模糊半径。数值越大，模糊程度越高。
• spread：阴影的扩散半径。正值扩大阴影大小，负值缩小。
• color：阴影的颜色。
• inset：可选。设置为 inset 时，创建的是内阴影。

语法示例

/* 创建水平偏移量为 10px，垂直偏移量为 10px，模糊半径为 5px，阴影颜色为黑色的阴影 */
box-shadow: 10px 10px 5px black;

/* 创建水平偏移量为 10px，垂直偏移量为 10px，模糊半径为 5px，阴影颜色为黑色，阴影扩散半径为 5px 的阴影 */
box-shadow: 10px 10px 5px 5px black;

/* 创建内阴影，水平偏移量为 10px，垂直偏移量为 10px，模糊半径为 5px，阴影颜色为黑色的阴影 */
box-shadow: inset 10px 10px 5px black;

应用场景

box-shadow 属性经常用于以下场景：

• 创建边框阴影；
• 为按钮、卡片等元素添加阴影效果；
• 模拟立体效果。

下面是一个应用 box-shadow 属性为按钮添加阴影效果的示例：

.button {
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

效果如下：

浏览器兼容性

box-shadow 属性兼容性很好，适用于所有现代浏览器及 IE9 及以上版本。需要注意的是，IE9 及以下版本不支持 inset 关键字。

总结

box-shadow 属性是为元素添加阴影效果的一种方式。它有多个值，包括水平偏移量、垂直偏移量、模糊半径、阴影扩散半径、阴影颜色和内外阴影等。在开发过程中，经常用于为按钮、卡片等元素添加阴影效果和模拟立体效果。