css上下左右都有阴影

CSS是前端开发中不可或缺的一种技术，它可以用来美化网站的外观和布局。阴影是一种非常常见的美化效果，可以通过CSS实现，而在CSS中上下左右都有阴影的处理方式也十分简单。下面我们就来看一下CSS如何在上下左右都添加阴影。

.box{
   box-shadow: 0 10px 20px rgba(0,0,0,0.5),
              0 -10px 20px rgba(0,0,0,0.5),
              10px 0 20px rgba(0,0,0,0.5),
              -10px 0 20px rgba(0,0,0,0.5);
} 

以上代码是实现上下左右都有阴影的CSS代码，它通过box-shadow属性来设置阴影。box-shadow属性可以设置多个阴影，中间用逗号分隔开，每个阴影可以设置水平偏移量、垂直偏移量、阴影半径和颜色。

在以上代码中，我们设置了四个阴影，分别代表左、右、上、下四个方向的阴影。比如第一个阴影的水平偏移量是0，垂直偏移量是10px，阴影半径是20px，颜色是rgba(0,0,0,0.5)，它表示的就是在元素的正下方添加一个半径为20px的颜色为深灰色透明度为0.5的阴影。

使用box-shadow属性不仅可以实现上下左右都有阴影，还可以实现其他不同的阴影效果，如只在上下添加阴影或只在x轴和y轴添加阴影等等，让我们可以在网站的美化中发挥创意，创造出更加优美的视觉效果。