# 投影 box-shadow
# 基本表现
投影位置和 border 区域没有重叠,可通过设置 inset 使投影在内部显示。
demo loading
# 属性参数
box-shadow: none | <shadow>#
<shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?
长度数值最少有两个,最多有四个,依次是水平偏移(offset-x)、垂直偏移(offset-y)、模糊半径(blur-radius)、扩散半径(spread-radius)。
<length>
数量:
- 2
<offset-x> <offset-y>
- 3
<offset-x> <offset-y> <blur-radius>
- 4
<offset-x> <offset-y> <blur-radius> spread-radius
# offset-x
水平偏移,正值向右偏移,负值向左偏移
# offset-y
垂直偏移,正值向下偏移,负值向上偏移
# blur-radius
模糊半径,模糊面积越大,阴影就越大越淡。 不能为负值,默认为 0
# spread-radius
扩散半径。取正值时,阴影扩大;取负值时,阴影收缩。默认为 0,此时阴影与元素同样大。
# inset
设置后投影在内部显示