box-shadow 属性向框添加一个或多个阴影。
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
-
设置各个方向的实影
实影.png
-
设置虚影，需要设置第三个参数blur
虚影01.png
-
当设置模糊时，这样的设置就无法实现单边的阴影。这时候就需要设置 第四个参数 spread阴影的尺寸
虚影单边.png
-
内部与外部的阴影设置。
当不设置偏移量的时候，只设置blur, 就可以得到我们常常需要的效果。inset，为设置内部阴影。
四周阴影和内部阴影.png
-
设置2个边阴影如何实现呢？
直接在后面写多个设置即可。这样还能设置4个边框阴影各不相同的效果。
阴影多边不同.png
-
那么对同一边设置多个阴影会是什么效果呢？
根据这个效果图，我们可以猜测，这个box-shadow设置多个值是一个叠加效果，而且先设置的叠加在前面。如果不设置blur值，应该完全被覆盖了。
阴影设置同一边多个.png
-
那么如果我们设置同一边，但是设置不同的偏移和会发生什么呢？
阴影叠加效果.png
一些精彩的效果就出来了！小伙伴，是不是可以通过这个属性就能画一条彩虹呢？可期！今天我这就不尝试了。
网友评论