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
掘金(之前没怎么用过掘金,但以后也会在上面更新啦): aliveAmy
有任何疑问也可以发邮件给我,看到后会及时回复大家: aliveAmy719@gmail.com