先前学习的时候只知道box-shadow的前三个阴影向x轴偏移距离y轴偏移距离和阴影大小
直到今天遇到一个案例才去网上细看box-shadow的使用方法才理解真正含义
box-shadow-CSS(层叠样式表)|MDN
这里是官方给予box-shadow的详解不过自己观看很容易遗漏一些关键点
在讲解之前我们先上代码再进行逐一讲解
看代码
box-shadow:1px2px3px4pxrgba(0,0,0,0.4)inset;
在box-shadow里面
第一个参数1代表了x正轴的偏移量向右
第二个参数2代表了y正轴的偏移量向左
第三个参数3代表了模糊程度只能是正值它也是实现阴影的关键
第四个参数4代表了阴影所扩展的半径如果没有第三个参数只能达到放大边框的大小
第五个参数inset为内置阴影,默认为外置阴影
那如果要用box-shadow实现四边阴影那该如何做呢
box-shadow:0px0px3px2pxrgba(0,0,0,0.4);
没错就是给当给第三个和第四个宽度达到阴影扩散的效果从而实现四边阴影
那如果想四边一边一个色呢?
box-shadow是可以分别给四边设置各自的样式的
达到的效果如下