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
- 阴影的颜色