css三边加阴影

CSS 可以轻松地给某个元素加上阴影，并且现在，它还能让你选择在哪些边上加阴影。三边加阴影如何实现呢？下面就来一起看看吧：

.box {
  box-shadow: 5px 5px 5px #888888;
  /* x偏移量 | y偏移量 | 模糊度 | 颜色 */
  box-shadow: 5px 5px 5px 5px #888888;
  /* 左偏移量 | 上偏移量 | 右偏移量 | 下偏移量 | 颜色 */
  box-shadow: 5px -5px 0 0 #888888;
  /* 左偏移量 | 上偏移量 | 模糊度 | 扩散度 | 颜色 */
} 

以上是三种不同的加阴影方式，分别是：

• 第一种，是常规的加阴影方式，即四个值分别表示 x 偏移量、y 偏移量、模糊度和颜色；
• 第二种，在第一种的基础之上，加了两个值，分别表示左偏移量和上偏移量；
• 第三种，是只在左和上两个方向加阴影，没有模糊度和扩散度。

总的来说，CSS 的阴影属性可以为我们在页面设计中带来更多的灵活性，让我们的网页看起来更加生动有趣。如果你想让某个元素只有指定的边添加阴影，就可以使用上面这三种方法中的其中一种。使用起来也很简单，就像上面的代码一样。