box-shadow详解

box-shadow详解：

我们可以看到box-shadow的属性如下

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

第一个值代表x轴的offset
第二值代表y轴的offset
第三个值是模糊半径: 这个值不能为负数
第四个值代表扩散半径： 这个值为正数时代表向外扩散，负数时代表向内收敛。

其次，box-shadow可以设置为inset,表示内部阴影。

第一个值和第二个值

那么x轴和y轴是如何表现呢？ 下面有张来解释：

在正常阴影情况下：
A边的x为正的时候， 阴影会被自身的元素遮盖
B边的y为正的时候， 阴影会被自身的元素遮盖
c边的x为负的时候， 阴影会被自身的元素遮盖
d边的y为负的时候， 阴影会被自身的元素遮盖

inset情况下：

c边的x为正的时候， 阴影会被自身的元素遮盖
d边的y为正的时候， 阴影会被自身的元素遮盖
A边的x为负的时候， 阴影会被自身的元素遮盖
B边的y为负的时候， 阴影会被自身的元素遮盖

以下为示例：

Inset

第三个值：

这里以女生的自拍照举例
1.当第3个值为0时(相当于不写)， shadow的阴影是实心的(此时是素颜真实照)。 如上图所示
2.值为正值时，会对shadow进行模糊(磨皮)。值越大，模糊的越厉害(磨皮程度越高)
3.值为负值时，shadow消失(不磨皮就算了，还丑化， 丑化了那还能看吗？那是不会给你看的)

示例如下：

正值

第四个值

正值：扩散shadow
负值：收敛shadow

正值

负值

第四个值可能有点不太好理解，我们可以这样来想：

设想：一个元素宽为100px， 高为100pxdiv，给它添加box-shadow属性就相当于为该元素创建了一个副本，但是该副本被压在原型下

1. box-shadow: 0 0 0 0;的时候副本被原型完全覆盖
2. box-shadow: 10px 10px 0 20px; 
3. 副本原点不变，并给它的的四边各加20px, 得到一个宽为140， 高为140的副本
4. 然后再分别向右和向下平移10px(x,y的值)
5. 得到的结果如下图box2所示得到的结果如下图box2所示

当扩散半径为负值时，也是同样的道理(收缩副本)

对于第三个值对第四个值的影响，暂时还没有理清楚，后期再补充，或者有人看到知道的，欢迎补充。

这次为了给ant design下的嵌套table 加父级间隔和box-shadow，算是把box-shadow的属性整个研究了遍，哭唧唧

也欢迎大家关注我，一起学习，一起进步呀：

B站(短视频类，基本控制在10分钟内，讲解清楚一个小的知识点)：web前端aliveAmy

CSDN: aliveAmy

掘金(之前没怎么用过掘金，但以后也会在上面更新啦): aliveAmy

有任何疑问也可以发邮件给我，看到后会及时回复大家： aliveAmy719@gmail.com