CSS阴影:偏移、模糊半径、扩散半径
想要更好的阅读体验,可以转我的。
box-shadow 概述
先从整体来说说 box-shadow 属性 。
box-shadow ⽀持定义多个阴影,他们应该使⽤逗号分割:
box-shadow: 3px 3px red, -1em 0 0.4em olive;
这⾥定义了两个阴影,分别是 3px 3px red、-1em 0 0.4em olive。
其中,每个阴影⽀持最多6个字段:
inset
可选的字段,默认不指定。
指定inset,阴影向内扩散,否则阴影向外扩散。
offset-x 和 offset-y
⽤来设置阴影偏移量,分为 x⽅向 和 y⽅向。声明的时候,x⽅向 在前,y⽅向 在后。
这个定义的顺序是有讲究的,CSS 的偏移采⽤的是我们平时定义坐标轴的习惯,按照 (x,y) 的顺序,这个规则不仅仅适⽤于我们今天的主⾓ box-shadow ,⽽且基本上和"位移"、"偏移"有关的属性都适⽤。
如果两者都是0,那么阴影不做偏移,位于元素正后⽅。
blur-radius
⼀般情况下,阴影是纯⾊的,没有渐变区域。
但是如果设置了模糊半径,就会创建⼀个渐变区域,向周围的颜⾊过渡。
渐变半径必须⼤于0。
spread-radius
扩散半径是对原来的纯⾊阴影的缩放。
borderbox
默认取值为0,代表阴影和物体⼀样⼤,但因为阴影在物体后⾯,所以你看不见。当然加上⼀层模糊半径你就能看到了。
⼩于0的时候,阴影会缩⼩。这种情况下往往你也看不到,需要设置⼀层很厚的模糊半径,然后慢慢调低扩散半径你才能看出区别。
⼤于0的时候,阴影会扩⼤。
color
阴影的颜⾊,这就不⽤解释了。
box-shadow 很简单,但是对于新⼿来说,在⾯对模糊半径和扩散半径可能会有点困惑,接下来,我们将结合例⼦,更加深⼊探讨这两者的区别。
准备: 定义⼀个球
因为⽅形的不太适合我们的讲解,我们先定义⼀个圆形的球:
.ball{
height: 100px;
width: 100px;
border-radius: 50% 50%;
margin: 50px;
display: inline-block;
}
外加⼀些阴影:
.b1{
box-shadow: 0px 0px 20px #888;
}
.b2{
box-shadow: 0px 0px 20px 10px #888;
}
.b3{
box-shadow: 0px 0px 0px 10px #888;
}
.b4{
box-shadow: 0px 0px 20px -10px #888;
}
.b5{
box-shadow: inset 0px 0px 20px #888;
}
.
b6{
box-shadow: inset 0px 0px 20px 10px #888;
}
.b7{
box-shadow: inset 0px 0px 0px 10px #888;
}
.b8{
box-shadow: inset 0px 0px 20px -10px #888;
}
只有模糊半径
我们先定义⼀个没有扩散半径的球:
<!-- box-shadow: 0px 0px 20px #888 -->
<div class="ball b1"></div>
可以看到,球的周围有⼀圈阴影,因为我们没有设置扩散半径,所以我们看到的这层阴影应该是全部的模糊半径。
我们还可以尝试使⽤⼀下内阴影:
<!-- box-shadow: inset 0px 0px 20px #888 -->
<div class="ball b5"></div>
模糊半径+扩散半径(取正)
接下来我们尝试使⽤在原来的基础上添加⼀个扩散半径:
<!-- box-shadow: 0px 0px 20px 10px #888 -->
<div class="ball b2"></div>
<!-- box-shadow: inset 0px 0px 20px 10px #888 -->
<div class="ball b6"></div>
第⼀感觉应该是阴影增厚了,再仔细看,我们会发现,增厚的部分的阴影都很浓,也就是说,我们增厚的部分是纯⾊的阴影,⽽不是经过了模糊的渐变阴影,这就是所谓的扩散半径。
只有扩散半径
我们可以把模糊半径去掉,看看差别:
<!-- box-shadow: 0px 0px 0px 10px #888 -->
<div class="ball b3"></div>
<!-- box-shadow: inset 0px 0px 0px 10px #888 -->
<div class="ball b7"></div>
看到了吗?阴影是纯⾊的,没有渐变。
总结下来,模糊半径就是渐变阴影半径,⽽扩散半径就是纯⾊阴影半径。并且,渐变阴影包在扩散阴影外⾯。模糊半径+扩散半径(取负)
最后再看⼀个例⼦,是扩散半径为负数的时候:
<!-- box-shadow: 0px 0px 20px -10px #888 -->
<div class="ball b4"></div>
<!-- box-shadow: inset 0px 0px 20px -10px #888 -->
<div class="ball b8"></div>
扩散半径为负数,就是把⾥⾯的那层纯⾊的半径减少了,也就是说,我们⽬前看到的是模糊半径的⼀⼩部分。⼤部分卡⽚UI的设计就是这种,你们可能很熟悉了,也是我个⼈觉得最好看的阴影。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论