box-shadow的具体使用方法（一分钟详解）

先前学习的时候只知道box-shadow的前三个阴影向x轴偏移距离y轴偏移距离和阴影大小

直到今天遇到一个案例才去网上细看box-shadow的使用方法才理解真正含义

box-shadow - CSS（层叠样式表） | MDN

这里是官方给予box-shadow的详解不过自己观看很容易遗漏一些关键点

在讲解之前我们先上代码再进行逐一讲解

看代码

    box-shadow: 1px 2px 3px 4px rgba(0,0,0,0.4) inset;

在box-shadow里面

第一个参数1代表了x正轴的偏移量 向右

第二个参数2代表了y正轴的偏移量 向左

第三个参数3代表了模糊程度只能是正值 它也是实现阴影的关键

第四个参数4代表了阴影所扩展的半径如果没有第三个参数只能达到放大边框的大小

第五个参数inset为内置阴影,默认为外置阴影

那如果要用box-shadow实现四边阴影那该如何做呢

    box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.4);

没错就是给当给第三个和第四个宽度达到阴影扩散的效果从而实现四边阴影

那如果想四边一边一个色呢？

box-shadow是可以分别给四边设置各自的样式的

box-shadow: 0px -10px 0px 0px red,//上边阴影
            -10px 0px 0px 0px yellow,//左边阴影
            0px 10px 0px 0px blue,//下边阴影
            10px 0px 0px 0px pink;//右边阴影

达到的效果如下