box-shadow全⾯解析
⼀、box-shadow语法：
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影⽔平偏移量，正⽅向为right） y-offset（阴影垂直偏移量，正⽅向为bottom） blur-radius（阴影模糊半径，为正，0为⽆模糊效果，值越⼤，越模糊） spread-radius（阴影扩展半径，可正可负） color
⼆、讲解
1. 阴影宽度：
spread-radius主要控制阴影的⼤⼩即宽度，四条边的阴影宽度都由他与阴影偏移量的和决定。
当不存在阴影偏移量时，仅由spread-radius直接控制阴影的⼤⼩即宽度。
当存在⽔平偏移量时，left与right边的阴影宽度为spread-radius与偏移量的和。
当存在垂直偏移量时，同理可推。
2. 内外阴影：
当不存在inset值得时候，阴影仅在box外部表现。且阴影宽度由spread-radius与对应⽅向上的阴影偏移量的和决定。
存在inset时，阴影在Box内部表现。其余规则相同。
3. 阴影偏移量：
box shadow怎么设置
x-offset正⽅向为right。y-offset 正⽅向为bottom。
当spread-radius 为0时，设置偏移量仍可表现出shadow，我理解为，浏览器会⾃动填充box-shadow最外围与border 之间的空隙。这样也可以解释，为什么有了偏移量后，为什么阴影宽度会改变。
4. blur-radius：
具体表现规则不清楚，但是不占据shadow的空间。（因为设置多层shadow时，会与其他shadow颜⾊叠加，⽽不是挤⾛）。
5. 多层阴影：
最内层优先级最⾼，之后依次降低。使⽤逗号“，”隔开

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。