box-shadow 使用记录

box-shadow 属性向框添加一个或多个阴影。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

1. 设置各个方向的实影

   
   
   

   实影.png

2. 设置虚影，需要设置第三个参数blur
   

   

   虚影01.png

3. 当设置模糊时，这样的设置就无法实现单边的阴影。这时候就需要设置 第四个参数 spread阴影的尺寸
   

   

   虚影单边.png

4. 内部与外部的阴影设置。
   当不设置偏移量的时候，只设置blur, 就可以得到我们常常需要的效果。inset，为设置内部阴影。

   
   
   

   四周阴影和内部阴影.png

5. 设置2个边阴影如何实现呢？
   直接在后面写多个设置即可。这样还能设置4个边框阴影各不相同的效果。

   
   
   

   阴影多边不同.png

6. 那么对同一边设置多个阴影会是什么效果呢？
   根据这个效果图，我们可以猜测，这个box-shadow设置多个值是一个叠加效果，而且先设置的叠加在前面。如果不设置blur值，应该完全被覆盖了。

   
   
   

   阴影设置同一边多个.png

7. 那么如果我们设置同一边，但是设置不同的偏移和会发生什么呢？

   
   
   

   阴影叠加效果.png
   
   

   一些精彩的效果就出来了！小伙伴，是不是可以通过这个属性就能画一条彩虹呢？可期！今天我这就不尝试了。