css背景加阴影效果

CSS是一种用于页面布局和样式设计的语言，它为我们提供了丰富的设计工具和效果。其中，背景加阴影效果是一种常见的装饰方式，可以让网页看起来更加别致和美观。

在CSS中，我们可以使用box-shadow属性来实现背景加阴影效果。box-shadow属性有几个参数可以设置，包括阴影的水平偏移量、垂直偏移量、模糊值、阴影颜色和阴影可见性等。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
 

上面的代码就是一个简单的例子，它定义了一个名为.box的样式，设置了宽度、高度和背景颜色，并使用box-shadow属性为其添加了一个模糊的黑色阴影效果。

除了上面的基本用法，我们还可以针对不同的属性进行更加细致的调整，例如设置阴影的位置、大小和模糊程度等。另外，我们也可以使用多个box-shadow属性来添加多重阴影效果。

.box {
  width: 200px;
  height: 200px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
 

上面这段代码就是一个添加了多重阴影效果的例子，其中第一个box-shadow属性设置一个较大的模糊值，产生较为模糊的效果，第二个box-shadow属性则设置一个较小的模糊值，产生较为清晰的效果。

总的来说，CSS的box-shadow属性可以为我们提供非常灵活和多样化的阴影效果，让我们的网页看起来更加生动和有趣。如果你还没有使用过这种效果，现在就可以试一试，为你的网页添加一点小清新吧！