共计 661 个字符，预计需要花费 2 分钟才能阅读完成。
● box-shadow 是 CSS3 标准中呈现的一个属性, 用于在元素四周创立一个暗影成果.
●通过属性值来设置暗影成果, 也能够给一个元素设置多个暗影成果
●暗影 : 一个和原始元素一样大小的影子内容, 并且默认和原始元素重叠在一起
属性值详解
全副属性值
| 值 | 形容 |
|---|---|
| horizontal offset | 暗影程度方向偏移量, 默认值是 0 |
| vertical offset | 暗影垂直方向偏移量, 默认值是 0 |
| blur radius | 暗影的含糊半径, 默认值是 0 |
| spread radius | 暗影的扩散半径, 默认值是 0 |
| color | 暗影的色彩, 默认值是彩色 |
| inset | 内暗影设置, 不设置是外暗影 |
{/* box-shadow: [h] [v] [blur] [spread] [color] [inset]; */
box-shadow: 0px 0px 0px 0px skyblue;
}
horizontal offset
vertical offset
blur radius
spread radius
color
inset
多暗影
●一个元素也能够设置多个暗影, 每一组属性值之间应用逗号分隔开就好
box-shadow:
[h] [v] [blur] [spread] [color] [inset],
[h] [v] [blur] [spread] [color] [inset],
[h] [v] [blur] [spread] [color] [inset];div {
box-shadow:
10px 10px 10px 10px orange,
20px 20px 10px 10px yellow,
-10px -10px 10px 10px red;
}
●这样一来, 这个元素就有三个暗影了
正文完
