image.png
CSS box-shadow 属性用于在元素的框架上添加阴影效果。
box-shadow: 0.5px 1px 2px 2px #d6d9e1;
-ms-box-shadow: 0.5px 1px 2px 2px #d6d9e1;
-moz-box-shadow: 0.5px 1px 2px 2px #d6d9e1;
-webkit-box-shadow: 0.5px 1px 2px 2px #d6d9e1;
有以下参数：
| 值 | 说明 |
|---|---|
| X轴偏移量 |
|
| Y轴偏移量 |
|
| blur阴影模糊半径 | 可选。模糊距离。 |
| spread阴影扩展半径 | 可选。阴影的大小。 |
| color阴影颜色 | 可选。阴影的颜色。省略默认为黑色。 |
| inset | 可选。(设置inset时为 |
向元素添加单个 box-shadow 效果时使用以下规则：
当给出两个、三个或四个值时：
- 如果只给出两个值, 那么这两个值将会被当作 <offset-x>,<offset-x>来解释。
- 如果给出了第三个值, 那么第三个值将会被当作 <blur> 解释。
如果给出了第四个值, 那么第四个值将会被当作 <spread> 来解释。 - 可选，<inset> 关键字。
- 可选，<color> 值。
属性效果说明
- offset-x、offset-y，容易理解，设置阴影的水平垂直偏移，可以设置负值。
- blur，值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0。
- spread，取正值时，阴影扩大；取负值时，阴影收缩。默认为0。
- inset， 如果没有指定inset，默认阴影在边框外，即阴影向外扩散。使用 inset 关键字会使得阴影落在盒子内部，这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框）、背景之上、内容之下。
- color，如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
设置多个值时
你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。阴影绘制由最后一个开始， 故第一个设置的阴影将覆盖在后设置的阴影之上。
利用此特性可以给上下左右边框设置不同样式的阴影效果：
box-shadow: 0px -5px 5px 0px #ff0000, /*上边阴影 红色*/
-5px 0px 5px 0px #3bee17, /*左边阴影 绿色*/
5px 0px 5px 0px #2279ee, /*右边阴影 蓝色*/
0px 5px 5px 0px #eede15; /*下边阴影 黄色*/
Tips:
当我们设置了border-radius为其他不为0的值时，阴影的四角也随之形成弧度。
box-shadow属性不会影响到盒模型的构成。我们通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上。
当只设置了spread大于0，没有设置blur（为0）时，元素阴影没有模糊效果，就像多了外边框。
网友评论