CSS3 box-shadow介绍

19 May

我对任何美的东西都会本能地生出一种爱,在CSS的世界里,凡和色彩渐变等沾边的属性都是我的菜。因此box-shadow这个属性怎能放过。本篇就详细介绍一下box-shadow盒子阴影。

按例先看一下基本参数:

none:是默认值,表示没阴影。设为none后下面参数都将变得无意义。

inset:内阴影。该参数可选,不设的话默认是外阴影。

x-offset / y-offset:必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移(即往右往下)。负值反过来往x轴y轴反方向偏移(即往左往上)。

blur-radius:阴影模糊半径。该参数可选,值为0表示不模糊,值越大,阴影的边缘就越模糊。值不能为负数。

spread-radius:阴影扩展半径。该参数可选,正值表示阴影扩展,负值表示阴影缩小。

color:阴影颜色。该参数可选,不设就取浏览器的默认色。因为各浏览器的默认色不同,推荐还是设一下,设一下又不会怀孕…

完整的语法box-shadow: [inset x-offset y-offset blur-radius spread-radius color]+ 熟悉正则表达式的能看懂后面+号表示可以设多个阴影。

理论是枯燥的,实际来试试。先来个最简单的,只设必选参数x-offset / y-offset和非必须但推荐设一下的color

box-shadow

.box-shadow {
    width: 150px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #b9b9b9;
    box-shadow: 5px 10px red;
}
<div class="box-shadow"></div>

效果一目了然。当x-offset / y-offset是正值时,阴影向x轴y轴正方向偏移。即相右偏移5px,向下偏移10px。同理x-offset / y-offset为负值时,阴影向x轴y轴负方向偏移。例如box-shadow: -5px -10px red;

box-shadow

x-offset / y-offset一正一负呢?看看就知道了。左图box-shadow: -5px 10px red;右图box-shadow: 5px -10px red;

box-shadow

上面都是两边阴影,要单边阴影呢?将x-offset / y-offset其中一个设为0即可,请自行脑补一下图片。

加上blur-radius模糊半径试试:左图box-shadow: 5px 10px 10px red;中图box-shadow: 5px 10px 20px red;右图box-shadow: 5px 10px 50px red;

box-shadow

很明显看出增加了blur-radius模糊半径后,原本的实体阴影其实往外扩展了,尤其是右图模糊半径设成50px后扩展的更为明显,边框的4条边都有了阴影效果。你可以试试模糊半径改成100px,500px,你会感觉生无可恋…

那为何阴影会外扩呢?那就必须解释一下浏览器实现阴影的原理,当浏览器读取到上面box-shadow: 5px 10px 10px red;这行CSS代码后,会分如下4步来实现阴影效果:

box-shadow15

上图从左至右依次是浏览器的4步动作。首先根据指定的color克隆一个和原始元素同样尺寸的元素。然后根据指定的x-offset / y-offset将克隆出来的元素进行偏移。

第三步根据指定的blur-radius模糊半径10px,依据高斯算法进行模糊处理。本质上是在阴影边缘将阴影色和纯透明色之间的颜色过渡,长度近似于blur-radius模糊半径的两倍,即20px左右。这就是导致阴影外扩的原因。

最后,浏览器在克隆元素上,将交集部分剪切掉,剩余部分拼接到原始元素边上,就实现了最终的效果。注意这和我们看上去的有的不同,看上去像是两个元素叠加在了一次,导致下层的克隆元素部分被遮盖了。其实不是的。这意味着即使你将原始元素的背景色设成半透明,也不会看到底层的克隆元素,因为原始元素的下面根本没有任何东西。

如果你想限制模糊半径的范围,如单边模糊时,你就需要加上spread-radius阴影扩展半径。左图box-shadow: 0 10px 20px red;。虽然只设了y轴偏移,但由于阴影外扩导致3边都出现了阴影。右图box-shadow: 0 10px 20px -10px red;。通过spread-radius负值让阴影缩小,-10px会把阴影的左右宽度和上下高度均缩小10px,即宽度和高度均缩小20px。

box-shadow

spread-radius的负值和blur-radius的值相等时,阴影会消失。

如果blur-radius为0(表示不模糊阴影),只有spread-radius时,效果相当于border。例如下图box-shadow: 0 0 0 5px red;。当然这并不是真正的border,盒子模型计算时宽高不会被计算在内,因此文字hello和阴影重叠了,如果是真的border是不会重叠的。

box-shadow

阴影默认都是外阴影,你可以设inset将阴影指定为内阴影。例如左图box-shadow: inset 0 0 20px red;右图box-shadow: inset 0 0 20px 10px red;

box-shadow

但当给图片加上内阴影会发现毫无作用,例如左图:

box-shadow

/* 左图 */
.div1 {
    display: inline-block; 
    box-shadow: inset 0 0 10px 5px blue;
}
<div class="div1">
    <imgsrc="head.png" />
</div>

左图div容器虽然已经设了内阴影,但完全没有效果。其实内阴影已经有了,只不过被图片给遮住了而已。要实现右图效果,你可以:

方案一:将子元素img层级降低,所以先将其设成relative再设z-index为-1

.div1 {
    display: inline-block; 
    box-shadow: inset 0 0 10px 5px blue;
}
.img1 {
    position: relative;
    z-index: -1;
}
<div class="div1">
    <img class="img1" src="head.png" />
</div>

方案二:将子元素img改成父元素div的background-img,所以先给div定宽高,再设background-image。关于background属性你可以点击这里

.div1 {
    width:150px;
    height: 150px;
    display: inline-block; 
    box-shadow: inset 0 0 10px 5px blue;
    background-image: url("head.png");
}
<div class="div1"></div>    //里面不再需要img子元素啦

方案一利用了CSS的层级关系,你可以理解为大层级关系

方案二其实是利用了box-shadow的层级关系,你可以理解为小层级关系。box-shadow的层级关系看W3C的原图:

spread-blur

width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

图中看出box-shadow的层级关系从高到低依次是border > 内阴影 > background-image > background-color > 外阴影。方案二就是利用了内阴影 > background-image这一特性。

像background一样,你还可以指定多层阴影,用逗号隔开。实现方式就是两个0偏移量和0模糊值加上正值的扩张半径。这也是实现多重边框的常见手段。彩虹走一个~

box-shadow

.box-shadow {
    width: 150px;
    height: 50px;
    border:2px solid red;
    box-shadow: 0 0 0 2px orange,
                0 0 0 4px yellow,
                0 0 0 6px green,
                0 0 0 8px #66CCCC,
                0 0 0 10px blue,
                0 0 0 12px #996699;
}
<div class="box-shadow"></div>

多层阴影的一个很常见的例子就是实现两侧阴影:

box-shadow16

box-shadow: 6px 0 5px -5px red,
	    -6px 0 5px -5px red;

上面介绍的不论是单边还是多边阴影,不论是单层还是多层阴影,都是均匀的阴影。下面来介绍一下单边不均匀的阴影是如何实现的。

其实单边不均匀的阴影不是仅靠box-shadow属性就能实现的,还需要配合图层覆盖和部分动画(如旋转)。如下图,下边的阴影是不均匀的,左下和右下的阴影明显比中间更突出:

box-shadow

分几步来讲解如何实现的:

box-shadow

step0是普通的div,没什么好多讲的,源代码如下:

body {
    background: #eee;
}
.box {
    width:200px;
    height:100px;
    background:#FFF;
    margin:10px;
    line-height:100px; 
    text-align:center;
    position: relative;  /*为下面absolute定位做准备*/
}
<div class="box">step 0</div>

从step1开始实现不均匀的阴影效果。先给div加上::before::after两个伪元素,内容为空,我们只要伪元素的躯壳,并不真想让伪元素显示出来。(伪元素里的红色border纯粹是为了看起来更清晰,最后会删掉的。)

.effect::before, .effect::after {
    content: "";
    border:1px solid red;
    width: 50%;
}
<div class="box effect">step 1</div>

box-shadow
再看step2,为两个伪元素增加absolute定位。通过lefttopabsolute元素定位,通过bottom拉伸absolute元素。(关于absolute定位可以参照这里

.effect::before, .effect::after {
    content: "";
    border:1px solid red;
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
}

step2中定位后::before::after两个伪元素完全重合在了一起,因此在step3中为::after指定right位置将它俩分开:

.effect::after {
    right: 10px;
    left: auto;
}

box-shadow
step3中两个伪元素一左一右分开后,在step4中让它俩稍微旋转一点角度,并加上本篇介绍的阴影:

.effect::before, .effect::after {
    content: "";
    border:1px solid red;
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
    transform: rotate(-5deg);     /*旋转*/
    box-shadow: 0 15px 10px #777; /*阴影*/
}
.effect::after {
    transform: rotate(5deg);   /*旋转*/
    right: 10px;
    left: auto;
}

到step4其实已经能明白不均匀阴影的实现原理了,最后一步设置z-index:-1;将伪元素隐藏掉(为演示效果而加的红色边框直接删掉)。最终代码:

.effect::before, .effect::after {
    content: "";
    width: 50%;
    position: absolute;
    left: 10px;
    top: 80%;
    bottom: 15px;
    transform: rotate(-5deg);
    box-shadow: 0 15px 10px #777;
    z-index: -1;
}
.effect::after {
    transform: rotate(5deg);
    right: 10px;
    left: auto;
}

总结

box-shadow属性本身参数不算多(相对其他属性),但要用好不容易。我承认凭脑子想就能写出效果并不容易,所以网上有一堆可视化页面可自动生成box-shadow效果,例如可以到css3gen上去试试。但能明白每个参数的意义,改动起来会容易点。权威请参考W3CMDN

Leave a Reply

Your email address will not be published. Required fields are marked *