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

发布时间 2023-04-09 09:29:07作者: 老陈家的大小姐
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;
}
}