Style boxShadow 属性

语法

boxShadow 属性的语法如下：

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

• h-shadow：水平阴影的位置。可以为正值（向右偏移）或负值（向左偏移）。
• v-shadow：垂直阴影的位置。可以为正值（向下偏移）或负值（向上偏移）。
• blur：模糊距离。可选参数，值越大，阴影越模糊。
• spread：阴影的尺寸。可选参数，正值扩大阴影，负值缩小阴影。
• color：阴影的颜色。可以使用颜色值或关键词。
• inset：可选参数，指定阴影为内阴影。

示例

添加外阴影

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: 5px 5px 10px #888888;
}

在上面的示例中，我们为一个名为 .box 的元素添加了一个向右下方偏移的阴影，模糊距离为 10 像素，颜色为 #888888。

添加内阴影

.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  box-shadow: inset 0 0 10px #888888;
}

在这个示例中，我们为 .box 元素添加了一个内阴影，模糊距离为 10 像素，颜色为 #888888。

常见应用场景

按钮阴影效果

// www.javascriptcn.com code example
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #0056b3;
}

.button:hover {
  box-shadow: 2px 2px 5px #0056b3, -2px -2px 5px #0056b3;
}

通过为按钮添加阴影效果，可以使按钮看起来更加立体和吸引人。

图片阴影效果

.image {
  width: 200px;
  height: 200px;
  background-image: url('example.jpg');
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

为图片添加阴影效果可以让图片看起来更加突出，增强视觉效果。

结语

通过 boxShadow 属性，我们可以轻松实现各种阴影效果，为页面增添立体感和层次感。希望本文对你有所帮助，欢迎在实际项目中尝试使用 boxShadow 属性，为页面增添新的视觉效果。