CSS3中的box-shadow属性，结合图案的详细分析
box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。（可以运用该属性画多边框）该属性让你可以对几乎所有元素的边框产生阴影。如果元素同时设置了 border-radius ，阴影也会有圆角效果。
语法：
box-shadow: offset-x | offset-y | blur | spread | color | inset;
/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;
/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;
/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;声明单个 box-shadow 的用法：
- 给出两个、三个或四个数字值的情况。
- 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量
<offset-x>和y轴上的偏移量<offset-y>。 - 如果给出了第三个值, 这第三个值将被解释为模糊半径的大小
<blur-radius>。 - 如果给出了第四个值, 这第四个值将被解释为扩展半径的大小
<spread-radius>。
- 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量
- 可选， 关键词
inset。 - 可选， 颜色值
<color>。
声明多个shadows时， 用逗号将shadows隔开。多个阴影时第一个阴影在最上面。
取值
<inset>：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下。
<offset-x> <offset-y>：这是头两个 <length> 值，用来设置阴影偏移量。<offset-x> 设置水平偏移量，如果是负值则阴影位于元素左边。 <offset-y> 设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。
<blur-radius>：这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。
<spread-radius>：这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
<color>：阴影的颜色。如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。
结合图案分析上面的一些设置选项：
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{ position:absolute;
left:200px;
top:200px;
width:100px;
height:100px;
background-color:yellow;
border-radius:0px;
box-shadow: 100px 100px 0 0 grey;
}
</style>
</head>
<body>
<div></div>
</body>
</html>（1）<spread-radius>：取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。
《1》当设置为0时：此时阴影的大小和原来的元素一样大小，既没有扩大也没有缩小，不过看不到，它在当前元素的下面，若是将前两个参数设置大些，让其平移出来便可以看到。
border-radius:0px;
box-shadow: 100px 100px 0 0 grey; /*在水平方向和垂直方向上均移动原图形边长的大小，可以看到阴影是存在的*/图案显示如下：
《2》当设置正值时，阴影扩大；取负值时，阴影收缩：如果参数的前两项均为0，那么当spread-radius值取0时，隐藏在其后，大小和原来元素相同，当设置为正值如20px时，会在原图形的基础上在上下左右方向分别增加20px。这时将blur-radius设置为0，也即是阴影边缘不迷糊，会看的比较清楚。
border-radius:5px;
box-shadow: 0 0 0 20px grey; 元素同时设置了 border-radius ，阴影也会有圆角效果。
(2)声明多个shadows时， 用逗号将shadows隔开。多个阴影时第一个阴影在最上面,后面设置的依次隐藏在上一个的后面。
background-color:yellow;
border-radius:5px;
box-shadow: 0 0 0 20px grey,
0 0 0 40px green;
第二个阴影的扩展尺寸大于第一个，只能显示第一个阴影覆盖不住的那部分。(3)<blur-radius>：这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利,主要描述阴影边缘的虚化模糊范围。
background-color:yellow;
border-radius:5px;
box-shadow: 0 0 0 20px grey,
0 0 0 40px green,
0 0 5px 60px red; background-color:yellow;
border-radius:5px;
box-shadow: 0 0 0 20px grey,
0 0 0 40px green,
0 0 30px 60px red;
}
(4)<inset>：默认阴影在边框外。使用 inset 后，阴影在边框内（即使是透明边框），背景之上(会覆盖住原元素的背景色)，内容之下。
《1》阴影在边框外时：