[分享]css中div四边阴影

在CSS中，四边阴影属性总共有几个，分别是box-shadow、text-shadow、inset和outset。下面让我们逐个来看一下这四个属性的用法。

.box-shadow {
  box-shadow: 10px 10px 5px grey;
} 

box-shadow属性用于为元素添加一个矩形的阴影，可以显示在元素的外侧或内侧。括号中的第一个值表示水平位移，第二个值表示垂直位移，第三个值表示模糊半径，最后一个值表示阴影颜色。

.text-shadow {
  text-shadow: 2px 2px 5px grey;
} 

text-shadow属性用于为文字添加阴影效果，可以让文字看起来更加立体。括号中的值与box-shadow相同，分别表示水平位移、垂直位移、模糊半径和颜色。

.inset-shadow {
  box-shadow: inset 3px 3px 5px grey;
} 

inset属性用于让阴影显示在元素的内侧，而不是外侧。

.outset-shadow {
  box-shadow: outset 3px 3px 5px grey;
} 

outset属性则是让阴影显示在元素的外侧。

通过运用这四个属性，我们可以为页面添加各种不同的阴影效果，使页面看起来更加生动和美观。