box-shadow: offset-x offset-y [blur [spread]] [color] [inset]
box-shadow 属性用于向盒子添加一个或多个阴影效果。
offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur：阴影模糊度，不能取负数。
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
inset：表示添加内阴影，默认为外阴影。
外阴影
设置单个阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 20px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果：
设置多个阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果：
spread取值对阴影大小的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 120px 0px 0px 0px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果：
由上图可见，当 spread 为0时，阴影大小与元素大小相同。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 120px 0px 0px 10px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果：
由上图可见，当 spread 为正数时，阴影大小将大于元素大小。如原来总宽高为102px的元素（包括边框2px），在设置阴影大小为10px后，阴影的宽高会变为122px（阴影宽高各加10）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 120px 0px 0px -10px red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果：
由上图可见，当 spread 为负数时，阴影大小将小于元素大小。如原来总宽高为102px的元素（包括边框2px），在设置阴影大小为-10px后，阴影的宽高会变为82px（阴影宽高各减10）。
内阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
box-shadow: 0px 0px 20px red inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果：
