box-shadow是CSS3新增的一个重要属性，用来定义元素的盒子阴影。
语法规则：
box-shadow:none | [inset x-offset y-offset blur-radius spread-radius color],[inset x-offset y-offset blur-radius spread-radius color]
box-shadow属性可以使用一个或多个投影，若使用多个投影时必须使用逗号“，”隔开。
none：默认值，元素没有任何阴影效果。
inset：阴影类型，可选值。若不设置，其默认的投影方式是外阴影；若取其唯一值“inset”，就是给元素设置内阴影。
x-offset：阴影水平偏移量，其值可以是正负值。若取正值，则阴影在元素的右边，反之取负值，阴影在元素的左边。
y-offset：阴影垂直偏移量，其值可以是正负值。若取正值，则阴影在元素的底部，反之取负值，阴影在元素的顶部。
blur-radius：阴影模糊半径，可选参数。其值只能是正值，若取值为“0”时，表示阴影不具有模糊效果，若取值越大，阴影的边缘就越模糊。
spread-radius：阴影扩展半径，可选参数。其值可以是正负值，若取值为正值，则整个阴影都延展扩大，反之取值为负值，则整个阴影都缩小。
color：阴影颜色，可选参数，若不设定任何颜色时，浏览器会取默认色，但哥浏览器默认色不一样，特别是在Webkit内核下的浏览器将无色，也就是透明色，建议不要省略这个参数。
<html lang="en"><head><meta charset="UTF-8"><title>box-shadow设置单边阴影效果</title><style type="text/css">.box-shadow {width: 200px;height: 100px;border-radius: 5px;border: 1px solid #ccc;margin: 20px;}.top {box-shadow: 0 -4px 5px -3px red;}.right {box-shadow: 4px 0 5px -3px green;}.bottom {box-shadow: 0 4px 5px -3px blue;}.left {box-shadow: -4px 0 5px -3px orange;}</style></head><body><div class="box-shadow top"></div><div class="box-shadow right"></div><div class="box-shadow bottom"></div><div class="box-shadow left"></div></body></html>
