有了box-shadow，就不用再用PS做图片阴影了

发布于：11-19

盒阴影，即box-shadow，它是用来向边框添加一个或多个阴影。

先看案例，这里为div标签设置box-shadow属性值，产生的阴影效果如下图所示。

<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>

<body>
<div></div>
</body>

语法：

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow表示水平阴影的位置，可以是负值，如果是负值，阴影在水平方向上则向左偏移；

v-shadow表示垂直阴影的位置，也可以是负值，负值表示垂直向上的阴影；

blur表示模糊半径，为零或忽略时阴影没有模糊效果；

spread表示阴影扩展尺寸；

color表示阴影的颜色；

inset表示内部阴影，缺省值是outset，即常见的外部阴影。

上面案例的对应关系是（看颜色）：

box-shadow:h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 5px #888888;

盒阴影也可以设置多个阴影列表，用逗号隔开多组值。

这四组水平和垂直阴影偏移量都为零，模糊半径也为零，但是设置不同的逐渐增大的扩展半径及不同颜色值，这样便形成了类似多个边框的效果。

div
{
margin:50px;
width:300px;
height:100px;
background-color:yellow;
box-shadow:0 0 0 10px #03F,
0 0 0 20px #0066FF,
0 0 0 30px #0099FF,
0 0 0 40px #00CCFF;
}