CSS 如何应用阴影在四个边上

在本文中，我们将介绍如何使用CSS在元素的四个边上应用阴影效果。

CSS的box-shadow属性可以在元素周围添加阴影效果。它可以接受以下几个值：水平偏移量，垂直偏移量，模糊半径，阴影颜色。其中水平偏移量和垂直偏移量用于确定阴影在元素中的位置，模糊半径用于控制阴影的模糊程度，阴影颜色用于设置阴影的颜色。

要将阴影应用于元素的四个边上，我们可以使用逗号分隔的四个box-shadow值。每个值定义了一个方向的阴影效果。

.box {
  box-shadow: 0px 5px 5px #888888,
              5px 0px 5px #888888,
             -5px 0px 5px #888888,
              0px -5px 5px #888888;
}

在上面的示例中，我们定义了一个名为.box的CSS类，将box-shadow属性应用于该类。通过设置不同的水平和垂直偏移量，我们可以在元素的四个边上创建阴影效果。使用负值可以在相应的方向上创建内部阴影效果。

此外，我们还可以通过使用关键字inset将阴影效果应用于元素的内部。这将使阴影效果出现在元素之间的内部空间上。

.box {
  box-shadow: inset 0px 5px 5px #888888,
              inset 5px 0px 5px #888888,
              inset -5px 0px 5px #888888,
              inset 0px -5px 5px #888888;
}

通过设置inset关键字，阴影效果将变为内部阴影，并在元素的内部空间上显示。

在某些情况下，我们可能希望阴影效果在元素的四个边上是对称的。要实现这一点，我们可以使用多个box-shadow值，每个值具有相同的水平和垂直偏移量，模糊半径和阴影颜色。

.box {
  box-shadow: 0px 5px 5px #888888,
              5px 0px 5px #888888,
              -5px 0px 5px #888888,
              0px -5px 5px #888888,
              5px 5px 5px #888888,
              -5px 5px 5px #888888,
              -5px -5px 5px #888888,
              5px -5px 5px #888888;
}

在上面的示例中，我们为每个方向分别定义了两个box-shadow值，以创建对称的阴影效果。

阅读更多：CSS 教程

总结

通过使用CSS的box-shadow属性，我们可以在元素的四个边上应用阴影效果。通过设置不同的偏移量、模糊半径和颜色，我们可以创建不同样式和形状的阴影效果。通过使用inset关键字，我们还可以将阴影效果应用于元素的内部空间上。通过组合多个box-shadow值，我们可以创建对称的阴影效果。掌握这些技巧，我们可以更好地设计和美化网页。