CSS3边框属性 阴影 box-shadow 属性

box-shadow 属性各个参数的含义

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离，使用类似高斯模糊的算法将阴影进行模糊处理，模糊后阴影的范围将扩大，扩大的距离为blur/2
spread	可选。阴影的大小：在原来阴影的大小上，各个方向同时扩大spread
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。向盒子内部延伸阴影

1、阴影的大小默认是跟盒子大小一致的（含boeder），h-shadow和v-shadow只会改变阴影的水平和垂直位置，不会改变大小，spread则会改变阴影的面积大小，

blur负责将阴影进行模糊处理，inset决定是否向元素内部方向产生阴影--内阴影 color 则决定阴影的颜色和透明度

 

2、内阴影是从border内圈开始扩展

外阴影（默认值）是从border外圈开始扩展


我们可以同时设置多种效果的阴影，层级方面：主元素>先设置的阴影>后面的阴影，各个阴影之间的颜色不会自动混合，二十相互覆盖

比如：

style{
.div{
    box-shadow: inset 0 0 6px #fff,
                inset 3px 0 6px #eaf5fc,
                inset 2px -2px 10px #efcde6,
                inset 0 0 60px #f9f6de,
                0 0 20px #fff;
}
}