box-shadow
- 版本:CSS3
- 2018.3.6
语法:
取值:
- none:
- 无阴影
- <length>①:
- 第 1 个长度值定义元素的阴影水平偏移值。正值,阴影出现在元素右侧;负值,则阴影出现在元素左侧
- <length>②:
- 第 2 个长度值定义元素的阴影垂直偏移值。正值,阴影出现在元素底部;负值,则阴影出现在元素顶部
- <length>③:
- 第 3 个长度值定义元素的阴影模糊值半径(如果提供了)。该值越大阴影边缘越模糊,若该值为
0
,阴影边缘不出现模糊。不允许负值 - <length>④:
- 第 4 个长度值定义元素的阴影外延值(如果提供了)。正值,阴影将向四面扩展;负值,则阴影向里收缩
- <color>:
- 定义元素阴影的颜色。如果该值未定义,阴影颜色将默认取当前最近的文本颜色
- inset:
- 定义元素的阴影类型为内阴影。该值为空时,则元素的阴影类型为外阴影
说明:
定义元素的阴影。参阅text-shadow属性
box-shadow
可以设定多组阴影效果,每组参数值以逗号分隔。该属性可以对几乎所有元素的生成框产生阴影。如果元素同时设置了border-radius,阴影也会有圆角效果。- 如果定义了多组阴影效果,它们的 z-ordering 和多个
text-shadow
规则相同,第一个阴影在最上面,以此类推。 - 对应的脚本特性为:boxShadow。
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 8.0 | 40.0+ | 40.0+ | 8.0+ | 40.0+ | 8.0+ | 4.4+ | 28.0+ |
9.0+ |