有时候，为了网页上的元素呈现的更加好看，可以给某一个块元素增加阴影效果。

在以往的方案中，可以搞一个背景图片，做成一个有阴影效果的背景图，但是随着css3的出现，可以直接使用css的box-shadow属性做出阴影效果来。

box-shadow属性出现，因为不用搞背景图片了，这样省了一些不必要的麻烦，也可以加快网站的打开速度。

语法

box-shadow:X轴偏移量(h-shadow) Y轴偏移量(v-shadow) 模糊半径(blur) 扩散半径(spread) 颜色(color) inset

属性

属性说明
h-shadow这个值必须的，表示水平阴影的位置，允许负值
正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur值会有模糊效果
v-shadow

这个值也是必须的，表示竖直阴影的位置，允许负值

正值阴影在下面，负值阴影在上面

blur非必须，表示模糊距离，值越大，阴影越模糊
spread非必须，表示阴影的大小，正值时阴影扩大，负值时阴影缩小，默认为0，和盒子同样大
color非必须，阴影的颜色，默认值为黑色
inset
非必须，将外部阴影(outset)改为内部阴影。

前两个属性是必须写的。其余的可以省略；

控制阴影左右显示使用h-shadow，控制阴影的上下显示使用v-shadow ；

阴影的大小使用spread，阴影的颜色使用color。
外阴影(outset)是默认的，可以省略，想要内阴影可以写 inset。

例子

<!DOCTYPE html>
<html>
<title>css box-shadow 阴影属性例子</title>
<head>
<style>
	div
	{
	   float:left;
	   margin-left:20px;
	   margin-top:10px;
	   color:#000;
	   width:150px;
	   height:100px;
	   background-color:orange;
	   text-align:center;
	}
	.div1{ box-shadow: 6px 6px;}
	.div2{ box-shadow: 6px 6px 8px;}
	.div3{ box-shadow: 6px 6px 8px 8px;}
	.div4{ box-shadow: 6px 6px 8px 8px red;}
	.div5{ box-shadow: 6px 6px 8px 8px red inset;}
	.div6{ box-shadow: 0px 0px 8px 8px red inset;}

</style>
</head>
<body>
<div class="div1">2个值</div>
<div class="div2">3个值<br>增加了模糊度</div>
<div class="div3">4个值<br>阴影扩散</div>
<div class="div4">5个值<br>修改阴影的颜色</div>
<div class="div5">6个值<br>外部阴影改为内部阴影inset</div>
<div class="div6">让阴影在外部均匀显示</div>

</body>
</html>
效果如图所示：

css box-shadow 阴影效果