[分享]css中如何设置阴影效果

在CSS中，我们可以使用box-shadow属性来给HTML中的元素添加阴影效果。

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

上面的代码表示给class为box的元素添加了一个水平偏移量为10px，垂直偏移量为10px，模糊半径为6px，阴影颜色为黑色且透明度为0.3的阴影效果。

box-shadow属性中的四个值分别为：水平偏移量、垂直偏移量、模糊半径、阴影颜色和透明度。

水平偏移量是指阴影距离元素右边缘的距离，可以为负值。

垂直偏移量是指阴影距离元素底部的距离，也可以为负值。

模糊半径是指阴影的模糊程度，越大就越模糊。

阴影颜色和透明度可以使用rgba()函数来设置，其中r、g、b分别为红绿蓝三种颜色的值，a表示透明度。

.box {
  box-shadow: 5px 5px 30px rgba(255,0,0,0.5);
} 

上面的代码表示给class为box的元素添加了一个水平偏移量为5px，垂直偏移量为5px，模糊半径为30px，阴影颜色为红色且透明度为0.5的阴影效果。

除了box-shadow属性外，我们还可以使用text-shadow属性来给文字添加阴影效果。

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

上面的代码表示给所有的h1标题添加了一个水平偏移量为2px，垂直偏移量为2px，模糊半径为2px，阴影颜色为黑色且透明度为0.3的阴影效果。

使用box-shadow属性和text-shadow属性可以为HTML中的元素和文字添加阴影效果，让页面更加美观。