CSS3盒阴影box-shadow

本文介绍了CSS3中的盒子阴影box-shadow，包括单边实影和单边阴影、两种四边阴影、内阴影、多层阴影等！以及结合边框圆角、变形、旋转、调整层级关系等属性实现了曲边阴影和翘边阴影效果！

box-shadow属性的基本使用

box-shadow:[inset] h-shadow v-shadow blur spread color;

共有6个参数，其中inset可以省略，省略情况下默认为外阴影。此外分别是阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影扩展半径、阴影颜色。
1.单边实影和单边阴影效果:

/*单边实影：模糊半径为0*/
.top{
      box-shadow:0px -5px 0 #ccc;
    }

/*单边阴影:阴影拓展半径必须配合使用！若没有扩展半径，则不是其他边也会有阴影效果*/
.bottom{
      box-shadow:0 5px 5px -3px #ccc;
    }

2.四边相同阴影效果：分两种！

第一种：只设置阴影模糊半径和阴影颜色

    /*模糊半径+颜色*/
    .box-shadow2{
      width:200px;height:200px;
      border:1px solid #ccc;
      box-shadow: 0 0 10px #ccc;
      margin: 10px;
    }
    /*在此基础上加上扩展半径可以加深阴影的深度（正值），也可向内压缩阴影(负值)，直到扩展半径等于模糊半径，阴影才完全消失。 */
    .box-shadow3{
      width:200px;height:200px;
      border:1px solid #ccc;
      box-shadow: 0 0 10px -1px #ccc;/*此刻阴影为完全消失，向内压缩了*/
      margin: 10px;
    }

第二种：只设置扩展半径和阴影颜色

/*设置阴影模糊半径和阴影颜色:模拟border边框，但不计入总大小*/
  .box-shadow4{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow: 0 0 0 10px #ccc;
    margin:20px;
  }

注意：设置阴影模糊半径和阴影颜色:模拟border边框，但不计入总大小，但要注意层级关系：边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上。

3.内阴影效果:

  /*内阴影效果*/
  .inset-shadow{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:inset 3px 3px 10px #ccc;
    margin: 10px;
  }

注意：可能在图片上会需要设置内阴影效果，但实际上img内阴影是无效果的！思路：在img外添加一个div容器，设置它的box-shadow内阴影。

4.多层阴影效果：

/*多层阴影：先定义在最顶层*/
  .box-shadow5{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:
      5px 5px 5px red,
      10px 10px 5px blue,
      15px 15px 5px green,
      20px 20px 5px orange;
    margin:20px;
  }

注意:多层阴影效果之间用逗号隔开。最先写的阴影显示在最顶层！

除此之外，可以根据第二点中第二种分类：只设置扩展半径和颜色，还能制作多色边框效果:

  /*多色边框*/
  .box-shadow6{
    width:200px;height:200px;
    border:1px solid #ccc;
    box-shadow:
      0 0 0 1px red,
      0 0 0 5px green,
      0 0 0 8px blue,
      0 0 0 12px yellow,
      0 0 0 16px orange,
      0 0 0 20px purple;
    margin:20px;
  }

注意:需明确层级顺序，不计入总大小，先定义先显示，但顶层的阴影不能太大，会遮住底部的阴影。显示颜色的宽度=该显示的实际宽度-前面阴影颜色的宽度 。

---

高级玩法：

1.曲边阴影效果：

实现思路：通过在元素前后加入伪元素before和after，利用border-radius制作特殊变形圆形，设置box-shadow，最后调整z-index图层层级关系即可。

HTML:

<div class="wrap effect">
    <h1>Box-shadow Effect</h1>
</div>

CSS：

h3{text-align:center;}
.wrap{
    width:70%;height:200px;
    margin:50px auto;
    background:#fff;
}
.wrap h1{
    font-size:25px;text-align:center;
    line-height:200px;
}
.effect{
    /*为后面添加的伪元素提供定位*/
    position:relative;
    box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;
    -webkit-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;
    -o-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;
    -ms-box-shadow:0px 1px 4px rgba(0,0,0,0.3), 0 0 50px rgba(0,0,0,0.1) inset;
}
/*同时设置before和after伪元素可以增强曲边阴影效果*/
.effect:after,.effect:before{
    content:"";/*attr(title)可获取标签的属性*/
    background:red;
    /*特殊定位：可自适应外容器的大小变化*/
    position:absolute;
    top:50%;
    bottom:0;
    left:20px;
    right:20px;
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.8);
    /*圆角边框制作特殊圆形：四个角上水平距离为100px，垂直距离为10px，和border-radius:100px 10px;区别*/
    border-radius:100px/10px;
    /*调整图层层级*/
    z-index:-1;
}

效果图：

2.翘边阴影效果:

实现思路：添加伪元素before和after，设置宽高、阴影效果，再变形、旋转、最后调整层级关系。

HTML:

<ul class="box">
    <li><img src="images/photo1.jpg" alt=""></li>
    <li><img src="images/photo2.jpg" alt=""></li>
    <li><img src="images/photo3.jpg" alt=""></li>
</ul>

CSS:

.box{
    width:980px;height:auto;
    margin:20px auto;border:1px solid red;
    overflow:hidden;/*浮动问题*/
}
.box li{
    width:300px;height:210px;
    /*美观：背景颜色没有，底下添加的图层可看到*/
    background:#fff;
    margin:20px 10px;
    float:left;
    border:2px solid #efefef;
    box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;/*多阴影叠加，内外阴影*/
    -webkit-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;
    -o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;
    -ms-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0px 60px rgba(0,0,0,0.1) inset;
    /*为伪元素提供定位*/
    position:relative;

}
.box li:before{
    content:"";
    /*宽高设置，定位*/
    width:90%;height:80%;
    position:absolute;
    left:20px;bottom:8px;
    background-color:transparent;
    /*设置阴影效果*/
    box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -ms-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    /*变形，旋转*/
    transform:skew(-12deg) rotate(-4deg);
    -webkit-transform:skew(-12deg) rotate(-4deg);
    -moz-transform:skew(-12deg) rotate(-4deg);
    -o-transform:skew(-12deg) rotate(-4deg);
    -ms-transform:skew(-12deg) rotate(-4deg);
    /*层级调整*/
    z-index:-2;
}
/*同上*/
.box li:after{
    content:"";
    width:90%;height:80%;
    position:absolute;
    right:20px;bottom:8px;
    background-color:transparent;

    box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -moz-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -o-box-shadow:0 8px 20px rgba(0,0,0,0.6);
    -ms-box-shadow:0 8px 20px rgba(0,0,0,0.6);

    transform:skew(12deg) rotate(4deg);
    -webkit-transform:skew(12deg) rotate(4deg);
    -moz-transform:skew(12deg) rotate(4deg);
    -o-transform:skew(12deg) rotate(4deg);
    -ms-transform:skew(12deg) rotate(4deg);
    z-index:-1;
}
.box li img{
    width:290px;height:200px;
    margin:5px;
}

效果图：