关于box-shadow给元素添加阴影的应用（CSS3)

先看一下示例

<div class="box1">
	this is a box
</div>

.box1 {
	margin: 30px 20px;
	height: 80px;
	width: 240px;
	border: 1px solid #444;
	//box-shadow: 60px -20px teal;
}

Example1

/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

Example2

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 40px 20px 5px aqua;

Example3

/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 40px 20px 2px 1px rgba(0, 0, 0, 0.2);

Example4

/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

向元素添加单个 box-shadow 效果时使用以下规则：
当给出两个、三个或四个 <length>值时。
如果只给出两个值，那么这两个值将会被当作 <offset-x><offset-y> 来解释。
如果给出了第三个值，那么第三个值将会被当作<blur-radius>解释。
如果给出了第四个值，那么第四个值将会被当作<spread-radius>来解释。
可选，inset关键字。
可选，<color>值。

若要对同一个元素添加多个阴影效果，请使用逗号将每个阴影规则分隔开。