【CSS】box-shadow 属性

box-shadow 是 CSS 属性，用于为元素添加一个阴影效果，使元素看起来浮起或有层次感。

该属性允许设置一个或多个阴影效果，其语法如下：

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

• h-shadow：水平阴影的位置。可以使用负值表示阴影在元素左侧，正值表示阴影在元素右侧，0 表示没有水平阴影。

• v-shadow：垂直阴影的位置。可以使用负值表示阴影在元素上方，正值表示阴影在元素下方，0 表示没有垂直阴影。

• blur：模糊半径。可选值，表示阴影的模糊程度。值越大，阴影越模糊，0 表示没有模糊。

• spread：阴影的扩展半径。可选值，表示阴影的大小扩展。正值表示阴影扩展，负值表示阴影收缩。

• color：阴影的颜色。可选值，表示阴影的颜色，可以是 CSS 颜色值（如 #rrggbb、rgba()、hsl() 等）。

• inset：可选值，用于设置是否为内阴影。如果存在 inset，则表示是内阴影，否则为外阴影。内阴影会出现在元素内部，外阴影则出现在元素外部。

例如，以下是一个示例，展示如何应用 box-shadow 属性：

div {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  box-shadow: 4px 4px 10px #888888;
}

在上述示例中，box-shadow: 4px 4px 10px #888888; 的样式为 <div> 元素添加了一个外阴影效果。水平位置为 4px，垂直位置为 4px，模糊半径为 10px，颜色为 #888888。这样 <div> 元素将有一个看起来浮起的效果，有了层次感。