box-shadow
不用多说,大家都知道是给元素设置阴影的,但是使用过程中有很多有意思的技巧。
定义
box-shadow
是以逗号分隔列表来描述一个或者多个阴影效果。同时如果设置了border-radius
,阴影同样对圆角生效。如果同时设置了多个阴影,那么第一个在最上面,以此类推。
初始值:none
适用于所有元素,包括伪类
继承性:无
语法
box-shadow:inset? <offset-X> <offset-Y> <blur-radius> <spread-radius> <color>
\可以不设置/ \可以不设置/
- inset: 默认阴影在边框外,使用inset后,阴影在边框内,背景之上内容之下
<offset-X>
<offset-Y>
: 设置阴影的水平偏移量(负值位于元素左边)和垂直偏移量(负值位于元素上边),<length>
值。
如果两者都是0,那么阴影位于元素的后面。如果设置了blur-radius
或者spread-radius
,则有阴影效果。blur-radius
:<length>
,值越大,模糊面积越大,阴影越大越淡。不能为负值,默认为0,此时阴影边缘表现为锐利。spread-radius
<length>
,取正,阴影扩大;取负,阴影缩小。默认为0,此时阴影与元素一样大。<color>
:阴影颜色,可以是各种颜色表达,rgb()
/rgba()
/hsl()
/hsla()
/hex-color
/named-color
/currentColor
/deprecated-system-color
兼容性
chrome | IE | firefox | safari | opera | android | IOS |
---|---|---|---|---|---|---|
10.0+支持-webkit前缀,经测试,63.0支持无前缀 | 9.0+ | 3.5/4.0+支持-moz-前缀,经测试59.0.3支持无前缀 | 3.0支持-webkit-前缀,5.1+支持无前缀 | 10.5+ | 支持-webkit-前缀 | 支持-webkit-前缀,经测试,7.0支持无前缀 |
示例:实现单独一侧投影
注:利用扩张半径缩小投影的尺寸
box-shadow: 0 5px 4px -4px red;
示例:实现邻边投影
注:设置扩张半径时,值不应该是模糊半径的相反值,只需要把阴影藏进一侧,另一侧自然露出就好。
box-shadow: 4px 4px 8px -4px red;
示例:实现双侧投影
注:因为扩张半径在四个方向的作用是均等的,因此我们无法一次性完成,只能分成两块来实现。
box-shadow: 0 4px 4px -4px red,
0 -4px 4px -4px red;
示例:盒子投影
可以制作盒子投影等类似的效果,此处只是粗略示意,有点丑*^_^*
box-shadow: 4px 4px 8px -2px #0fb8eb,
4px 4px #046380,
10px 10px 20px 0 rgba(0,0,0,0.8);