css3 设置 4个边阴影

CSS3是页面美化的利器，它提供了许多强大的样式属性，其中设置边框阴影也是其重要的功能之一。在CSS3中，我们可以使用Box-shadow属性快速、简单地设置元素四个边的阴影效果。

.Box{
  width:200px;
  height:200px;
  border:1px solid #ccc;
  Box-shadow:0 0 10px #000;
}

上述代码添加了一个宽、高为200像素的边框，Box-shadow属性中的三个值分别为偏移量、模糊半径和阴影颜色。这样我们就可以得到一个简单的阴影效果。

如果要如何设置四个边都有阴影呢？可以在Box-shadow属性中使用inset关键字，代表要设置的是内阴影而非外阴影。

.Box{
  width:200px;
  height:200px;
  border:1px solid #ccc;
  Box-shadow:inset 0 0 10px #000,inset 0 0 10px #000,inset 0 0 10px #000;
}

这里我们使用了4个inset关键字，分别设置了上、右、下、左四个边的内阴影效果。值得一提的是，我们还可以分别为各个边设置不同的阴影。

.Box{
  width:200px;
  height:200px;
  border:1px solid #ccc;
  Box-shadow:inset 0 0 10px #000,/*toP*/
             inset -10px 0 10px #000,/*right*/
             inset 0 -10px 10px #000,/*bottom*/
             inset 10px 0 10px #000; /*left*/
}

这个例子中我们为上、右、下、左四个边分别设置了不同的内阴影效果，可以看到它们都以交错的方式出现在了等宽的边框上。

总的来说，CSS3提供的Box-shadow属性强大灵活，我们可以用它轻松实现不同的阴影效果，让页面看起来更具立体感。