重磅来袭！原来阴影可以这样玩？

HTML5学堂：有阴影的地方，必定有光，每一个物体都会有一个阴影与它如影随形。当然在页面制作中，我们使用到的标签也是有着各种各样不同的阴影效果的，比如模块的外发光、元素的背光阴影等等。针对这些效果，作为前端的我们又该如何去操作，是使用图片来替代？还是考虑代码操作呢？

本文主要内容

1. CSS3的阴影介绍

2. 盒阴影语法

3. 盒阴影的特征

4. CSS3盒阴影特效

5. 总结

1. CSS3的阴影介绍

阴影可以分文字阴影和盒模型阴影(简称“盒阴影”)。盒阴影与文本阴影一样，都可以代替具有阴影效果的图片来使用，以减少页面对服务器的请求压力。在使用方面来说，text-shadow 是用来制作文本阴影，而box-shadow主要实现的是图层阴影。当然我们有时候会用盒阴影来代替边框使用，这是因为盒阴影不占物理空间，而边框会占据空间，导致了移动端设置自适应宽度受到了精准度的影响，那么接下来我们来看看盒阴影是怎么使用的！

2. 盒阴影语法

2.1 box-shadow的语法

box-shadow: X-offset Y-offset blur-radius spread-radius color inset;

简单的解释如下：

box-shadow: X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色投影方式;

注意：box-shadow也可以使用多组数值，如果使用多组值必须使用逗号“,”分开。

2.2 语法分析：

box-shadow属性最多可以有6个参数的设置，它们各自的含义以及取值如下：

1）X轴偏移量：指阴影水平偏移量，其值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；

2）Y轴偏移量：指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；

3）阴影模糊半径：此参数是可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

4）阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小；

5）阴影颜色：此参数可选，可以使用rgba、颜色单词等方式来书写；

6）X阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果设置阴影类型为“inset”时，其投影就是内阴影。

3. 盒阴影的特征

给大家介绍盒阴影之前，还是需要先把今天用到的公共代码先整理出来。如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>CSS3盒阴影</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <style type="text/css">
        .wrap {
            width: 1000px;
            height: 1500px;
            margin: 100px auto;
        }
        .wrap div {
            float: left;
            width: 200px;
            height: 100px;
            margin: 60px 0 0 30px;
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div>HTML5学堂-码匠</div>
        <div class="outer">
            <div class="inter"> </div>
        </div>  
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div>HTML5学堂-码匠</div>
        <div class="drop-shadow">HTML5学堂-码匠</div>
    </div>
</body>
</html>

3.1 阴影的默认状态

较之ps制作出来的图片相比，CSS3的box-shadow可以通过改变其参数得到不同的效果，如：改变阴影偏移量的设置，我们可以使阴影只在对象的上下左右的任一边出现，也可以让其出现在其中的某几个边上；其二可以随时调节阴影大小，边缘模糊度，阴影颜色；其三可以随时更改为内阴影，另外还可以设置多个阴影效果。

接下来我们先来看一个实例:

.wrap div:nth-child(1) {
    box-shadow: 5px 5px 5px;
}

效果如下：

回到上例来，在并没有给出具体的阴影颜色的情况下，这个小块有了一个黑色的外延阴影出现，即为box-shadow的默认状态。

3.2 阴影是否会影响内容？

把外层div设置为100px*100px，里面div设置为60px*60px，并在里面的div上加上一个向下向右偏移50px的绿色阴影，我们看看多出来的阴影会怎么样？

.wrap .outer {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    background: #fff;
}
.wrap .outer .inter {
    width: 60px;
    height: 60px;
    margin: 10px auto;
    background: #ccc;
    box-shadow: 50px 50px 0 0 green;
}

效果如下：

从上图效果我们可以看出，阴影多出来的部分会撑破容器跑出来。所以在阴影偏移、阴影扩展以及阴影模糊的作用下，对象的阴影仅仅只是一个层级上的展示，并不会影响到内容。

3.3 盒阴影与边框的比较

首先来看一个使用盒阴影制作的带有边框的效果，如下：

.wrap div:nth-child(3) {
    box-shadow: 0 0 0 1px red;   
}

效果如下：

大家来想想这种效果是不是跟我们在元素中的boder: 1px solid red;属性产生的效果很相似？对的，box-shadow不单可以制作出阴影的效果，还可以利用其扩展半径这个值，来给对象制作出类似于边框的样式。下面我们来看一个对比的实例：

.wrap div:nth-child(3) {
    box-shadow: 0 0 0 1px red;   
}
.wrap div:nth-child(4) {
    border: 1px solid red;   
}

效果如下：

实际上利用box-shadow来制作边框，只能说看上去像边框，但实质其并非边框，它和border还是有本质上的区别的。从上图中可以发现左右两边的模块有点参差不齐，如果需要这种不齐的效果更明显一些，只需要把其扩展半径值变大，使得两者之间的相差更大即可，如：

.wrap div:nth-child(5) {
    box-shadow: 0 0 0 20px red;   
}
.wrap div:nth-child(6) {
    border: 20px solid red;
}

效果如下：

我们接着来看上述两个例子在Chrome下的layout图：

结合两者在Chrome下的layout图，更证实了我们前面所讲的阴影不会影响页面的任何内容与布局。第一个块的阴影被浏览器忽略不计，并不算做内容的大小，但是第二个块的边框被计算了大小。所以借住这个特点，我们盒阴影所模拟的边框是可以被自由使用的，但必须要注意其层级关系。

4. CSS3盒阴影特效

前面我们主要举例说明了如何利用box-shadow给元素加上阴影效果、阴影对布局有无影响以及如何应用阴影模仿元素边框效果等。这些都是我们box-shadow常用的一些阴影效果，下面我们再来例举几个特殊的实例：内阴影inset、body设置阴影和投影Drop-shadow效果。

4.1 内阴影inset

此效果的制作比较简单，只需要把默认的outset改成inset即可，如下：

.wrap div:nth-child(7) {
    box-shadow: 0 0 25px 0 red inset;
}

下图即是实现块上添加内阴影的效果：

4.2 body设置阴影

使用阴影来为body设置一个朦胧的样式，如下：

body:before {
    position:fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    content:"";
    z-index: 999;
    box-shadow: 0 0 40px rgba(255,0,0,0.9);
}

效果如下：

上述书写中需要提醒大家，为了不影响布局，top的取值最好和height的取值一致，只是top使用负值。利用同样的方法我们可以给任何一个元素加上阴影，但相应需要改变其定位方式。

4.3 Drop-shadow效果

通过box-shadow实现Drop-shadow效果是仅用一个div标签元素，然后配合其两个伪元素":before"和":after"；最后分别给其伪元素定位到div的后面，并把box-shadow应用到这两个伪元素上。具体我们来看其实现步骤：

1、先为定义了叫做"drop-shadow"的div设置一个基本的样式：

.wrap .drop-shadow {
    position: relative;
    width: 300px;
    height: 150px;
    margin-left: 100px;
    background: #ccc; 
}

2、接着给drop-shadow的“:before”和":after"定位到drop-shadow的下面，并且给drop-shadow的":before"和":after"加上阴影效果。

.drop-shadow:before,
.drop-shadow:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 150px;
    z-index: -1;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
}

3、现在只得到了一边的阴影效果，那我们可以通过应用CSS3的transforms来实现另一边的效果，并且需要改变":after"伪元素定位方向（伪元素":after"在相反方向旋转，相对于":before"）。

.drop-shadow:before,
.drop-shadow:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 150px;
    z-index: -1;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    transform:rotate(10deg);
}

4、Drop-shadow最终核心代码如下所示，只是我们在“:before”和“:after”中加了一个"max-width"的限制。

.wrap .drop-shadow {
    position: relative;
    width: 300px;
    height: 150px;
    margin-left: 100px;
    background: #ccc; 
}
.drop-shadow:before,
.drop-shadow:after {
    position: absolute;
    content: "";
    left: 10px;
    bottom: 15px;
    width: 50%;
    height: 20%;
    max-width: 150px;
    z-index: -1;
    /*add box-shadow*/
    -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    box-shadow: 0 15px 10px rgba(125,125,125,0.8);
    /*add css3 transform*/
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.drop-shadow:after {
    right:10px;
    left: auto;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    transform:rotate(10deg);
}

Drop-shadow的效果如下：

5. 总结

那么今天我们对于CSS3的box-shadow的讲解就到这里了，到现在为止主要与大家探讨和学习了CSS3的圆角border-radius及文本阴影text-shadow。最后不能不说的是，CSS3的强大功能一直是网站样式中细节处理的强力保证，大家应该多做了解与学习。

本文系HTML5学堂独家内容，转载请在文章开头显眼处注明作者和出处“HTML5学堂(http://www.h5course.com/)”