box-shadow 属性各个参数的含义
值 | 说明 |
---|---|
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离,使用类似高斯模糊的算法将阴影进行模糊处理,模糊后阴影的范围将扩大,扩大的距离为blur/2 |
spread | 可选。阴影的大小:在原来阴影的大小上,各个方向同时扩大spread |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。向盒子内部延伸阴影 |
阴影的大小默认是跟盒子大小一致的(含boeder),h-shadow和v-shadow只会改变阴影的水平和垂直位置,不会改变大小,spread则会改变阴影的面积大小,
blur负责将阴影进行模糊处理,inset决定是否向元素内部方向产生阴影--内阴影 color 则决定阴影的颜色和透明度
我们可以同时设置多种效果的阴影
比如:
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; } }
标签:CSS3,box,模糊,阴影,inset,shadow,属性 From: https://www.cnblogs.com/cui-ting/p/17299833.html