重新学习css之box-shadow

作者 likaiqiang 日期 2019-08-18
重新学习css之box-shadow

box-shadow

本来想各个属性分开写逐个击破的,奈何语言表达能力有限,还是合一起好说一点。box-shadow总共有五个属性:

  1. 阴影方向
  2. 阴影x、y轴偏移量
  3. 阴影模糊半径
  4. 阴影扩散半径
  5. 阴影颜色

首先阴影的形状是元素边框的形状,而不是元素的形状。其次阴影的方向默认向外,长度从border的外边框开始计算,而且这个特性与box-sizing无关。

上面的例子阴影的方向向外,x轴上往右偏移10px,y轴上往下偏移5px,阴影模糊半径与阴影扩散半径都为0,阴影颜色为rgba(0,0,0,.5)。由于阴影模糊半径为0,所以看起来没有模糊效果。

上面的例子可以自己调节阴影模糊半径,可以看出,模糊半径的起始位置为x轴/y轴的偏移位置,其实还应该加上阴影扩散半径,这块扩散半径为0,所以看起来与扩散半径无关。

上面的例子可以调节模糊半径与扩散半径。可 以看出扩散半径也可以改变阴影的偏移量,与分别设置x/y轴不同的是,扩散半径直接作用于x/y轴,方向为阴影的方向(默认向外)。

上面的例子仅仅加了inset关键字,其他的都跟之前的一样。那么最终效果也仅仅改变了阴影的方向?

注意看阴影偏移的起始点,与不加inset不同的是,起始点从border的外边框变成了内边框。

box-shadow还支持多阴影,这就有意思了。张的一篇文章感兴趣的可以看看,挺有意思的,总共加了四个阴影,外面一个,里面一个,after、before各渲染一个,再加上旋转,竟然能“拼“出这种效果。