css的阴影是什么

在CSS中，阴影是一种可用于元素的覆盖效果。

通过添加阴影，可以使元素在屏幕上看起来更加立体，同时增加美感。

阴影的实现方式有很多种，最常用的是通过box-shadow属性。该属性允许我们指定元素的阴影类型、颜色、偏移量和模糊程度，以及阴影的传播范围。

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

在上面的代码中，我们指定了一个名为.box的元素，并将其阴影设置为完全不透明的黑色，偏移量为0px，模糊程度为10px。

如果想要添加多层阴影，可以使用逗号分隔多个box-shadow属性值，如下所示：

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

在上面的代码中，我们在.box元素上添加了两个不同的阴影层级，一个10px深度的较浅阴影，一个20px深度的较深阴影。

除了使用box-shadow属性之外，我们还可以使用text-shadow属性实现文本阴影。该属性允许我们指定文本的阴影颜色、位置和模糊程度。

h1 {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
 

在上面的代码中，我们将h1元素的文本阴影设置为2px深度、2px偏移、模糊程度为5px的透明黑色。

总的来说，阴影是一种非常常用的CSS效果，旨在增加元素立体感和美感。