CSS3 box-shadow

2018-07-16
CSS
579

首先我们知道 box-shadow 的几个参数如下:

box-shadow: h-shadow v-shadow blur spread color inset

对于这几个参数,大家应该都有所了解(不了解的看看英文意思也就知道的差不多),但是,很多人仅仅是知道,并不会灵活运用之。对于此模型想到一个好的方法使用:

盒子的阴影是盒子的复制品,放在盒子的下方,正常情况下看不到

这时,就可以用box-shadow来对后面那个阴影进行操作:

h-shadow

h-show 是将后面的阴影水平平移,只是平移,不改变阴影大小。正为向右,负为向左。要注意的是,若是向右平移x,右侧自然会有一个x距离的阴影,而左侧,也会向右平移x的距离,不是和上边盒子的左边距对其的哦

v-shadow

v-shadow 和h-shadow类似,是将下层阴影上下平移。正为下,负为上。

blur

blur 是底层阴影边的一个模糊程度,那么何为模糊程度?一开始我也是不知道什么是模糊程度,拿来就用了,并未深究。后来发现,若模糊x,是将阴影的颜色从阴影的边开始到x,这段距离中,将阴影颜色逐渐变为透明,像是执行了一个linear-gradient颜色渐变。

spread

spread 这个参数有点意思,他是将底层阴影想四周扩展x的距离,记住是四周。比如说spread值为x,那么,底层阴影的上下左右都向外延伸x的距离。如果为负值,那么就都像内缩短x的距离。

那么为什么说这个参数有意思呢,有了它,可以干很多事。比如说

box-shadow:0 0 0 1px #ccc;
-webkit-box-shadow:0 0 0 1px #ccc;

给它一个1px的值,让其向四周扩展,那么一个1像素的边框不就有了,再配合上模糊,一个好看的虚影边框就有了,哈哈。

box-shadow:10px 0 0 -9px #ccc;
-webkit-box-shadow:10px 0 0 -9px #ccc;

上面这行代码,如果盒子的高为x,那么,这时,阴影的高就是(x-9*2),阴影的宽为,(10-9)=1; 就会出来一个内部的1px的右侧分割线竖线,哈哈。(代码分析,首先将阴影向右平移10px,然后在从四周向里缩9px)

inset

inset 可以理解为将没有inset的突出的阴影,根据盒子对角线,对称的放在盒子里面。但是,这样得有个旋转变换,不太好想象。或者可以理解为盒子的左边和上边的一个向内扩展,负值就是另外边的扩展。

扫码体验小程序版