box-shadow

165 阅读1分钟

box-shadow属性

box-shadow支持定义多个阴影,他们应该使用逗号分割:

- inset

  • 可选的字段,默认不指定。
  • 指定inset,阴影向内扩散,否则阴影向外扩散。

- offset-x 和 offset-y

  • 用来设置阴影偏移量,分为 x方向 和 y方向。声明的时候,x方向 在前,y方向 在后。
  • 这个定义的顺序是有讲究的,CSS 的偏移采用的是我们平时定义坐标轴的习惯,按照 (x,y) 的顺序,这个规则不仅仅适用于我们今天的主角 box-shadow ,而且基本上和”位移”、”偏移”有关的属性都适用。
  • 如果两者都是0,那么阴影不做偏移,位于元素正后方。

- blur-radius

  • 一般情况下,阴影是纯色的,没有渐变区域。
  • 但是如果设置了模糊半径,就会创建一个渐变区域,向周围的颜色过渡。
  • 渐变半径必须大于0。

- spread-radius

  • 扩散半径是对原来的纯色阴影的缩放。
  • 默认取值为0,代表阴影和物体一样大,但因为阴影在物体后面,所以你看不见。当然加上一层模糊半径你就能看到了。
  • 小于0的时候,阴影会缩小。这种情况下往往你也看不到,需要设置一层很厚的模糊半径,然后慢慢调低扩散半径你才能看出区别。
  • 大于0的时候,阴影会扩大。

- color

  • 阴影的颜色

案例

只有模糊半径

模糊半径+内阴影

模糊半径+扩散半径(取正)

只有扩散半径

模糊半径+扩散半径(取负)