前言

说起box-shadow那第一个想法当然就是用来实现阴影，其实它还能用于实现其他好玩的效果的，本篇就打算说说box-shadow的那些事。

二话不说看效果

3D小球

纸张阴影(来自@张鑫旭老师)

细读属性

看到上面这么绚丽的效果，是不是迫不及待想弄清box-shadow呢？下面我们来一步步解密它吧！

概述属性语法

box-shadow: none | <shadow>[,<shadow>]*
默认值为none
<shadow>:inset? && <length>{2,4} && <color>?
shadow pattern，默认为outset，即采用outer box-shadow。通过设置为inset时，则采用inner box-shadow。
horizontal offset，阴影距离原位置的水平位移，正数表示向右移动，负数表示向左移动。
vertical offset，阴影距离原位置的垂直位移，正数表示向下移动，负数表示向上移动。
blur radius，默认值为0，阴影模糊度半径。
spread distance，默认值为0，扩展或缩小阴影的作用面积。
<color>，阴影颜色，默认与color属性一致。

注意：我们可以同时设置多个阴影，而阴影的z-index值从左向右递减。

outer box-shadow 和 inner box-shadow怎么玩？

默认情况下采用的是outer box-shadow，当在box-shadow中添加inset关键词后，则采用inner box-shadow了，但到底它俩的效果是如何的呢？

outer-box-shadow
特点：阴影落在元素的border box之外。
实现原理：

1. 创建一个与元素border box尺寸一致的阴影盒子;
2. 将阴影盒子定位到于元素border box重合，并位于元素之下;
3. 根据horizontal offset和vertical offset来相对原位置作移动;
4. 根据spread distance缩放阴影盒子的尺寸(会影响盒子的位移);
5. 根据blur radius对阴影盒子作加工;
6. 最后将阴影盒子与元素border box重合部分剪切掉。
   
   

   1 2 3 4 5 6 7 8 9 10 11 12

   <style type="text/css"> .box{   background: #888;   width: 100px;   height: 100px; } .outer-box-shadow{   box-shadow: 90px 10px #F00; } </style> <div class="box outer-box-shadow"></div> </div>

   
   模拟一下：
   
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   <style type="text/css"> .box{   position: relative; } .box-shadow{   position: absolute;   z-index: -1;   background: #F00;   width: 100px;   height: 100px;   left: 20px;   top: 20px; } .box-content{   background: #888;   width: 100px;   height: 100px; } </style> <div class="box">   <div class="box-shadow"></div>   <div class="box-content"></div> </div>

inner-box-shadow
特点：阴影落在元素的padding box之内。
实现原理(纯个人理解)：

1. 创建一个与元素padding box尺寸一致的阴影盒子;
2. 将阴影盒子定位到于元素padding box重合，并位于元素之上;
3. 水平和垂直各画两条线，分别跟元素padding edge重合;(共4条分别记为left/top/right/bottom-guideline)
4. 根据horizontal offset和vertical offset移动left/top/right/bottom-guideline。
5. 根据spread distance移动4条线。spread distance为正数时，left-guideline向右移动，top-guideline向下移动，right-guideline向左移动和bottom-guidelien向上移动；spread distance为负数时，则相反。
6. 根据blur radius加工元素各padding edge至其对应的guideline间的区域.
7. 对阴影盒子进行剪裁
   1. 剪切掉不与元素padding box重叠的部分；
   2. 仅显示元素各padding edge至其对应的guideline间的区域。
      
      

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

      <style type="text/css"> .box{   float: left;   background: #888;   width: 100px;   height: 100px;   margin-right