CSS box-shadow 属性
在 CSS 2.1 中，如果想要为元素添加边框阴影，也是只能使用背景图片的方式来实现。在 CSS 3 中，我们可以使用 box-shadow 属性轻松为元素添加阴影效果。
语法：
box-shadow: x-offset y-offset blur spread color style;说明：
box-shadow 属性的参数非常多，说明如下。
x-offset：定义水平阴影的偏移距离，可以使用负值。由于 CSS 3 采用的是 W3C 坐标系（如下图所示），因此 x-offset 取值为正时，向右偏移；取值为负时，向左偏移。y-offset：定义垂直阴影的偏移距离，可以使用负值。由于 CSS 3 采用的是 CSS 坐标系，因此 y-offset 取值为正时，向下偏移；取值为负时，向上偏移。blur：定义阴影的模糊半径，只能为正值。spread：定义阴影的大小。color：定义阴影的颜色。style：定义是外阴影还是内阴影。
提示: box-shadow 属性定义的是 “盒子阴影”，而 text-shadow 属性定义的是 “文本阴影”。
示例 1：CSS 实现阴影效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid silver;
box-shadow: 5px 5px 8px 0px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
box-shadow: 5px 5px 8px 0px red; 表示阴影的水平偏移距离为 5px，垂直偏移距离为 5px，模糊半径为 8px，阴影大小为 0px，阴影颜色为 red。
CSS 阴影的 “偏移距离”
对于 box-shadow 属性来说，x-offset 用于定义水平阴影的偏移距离，y-offset 用于定义垂直阴影的偏移距离。
示例 2：定义阴影的偏移距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid silver;
box-shadow: -5px -5px 8px 0px red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
小伙伴们可以自行测试一下，看看 x-offset 和 y-offset 分别设置为正数或负数时，阴影的方向有什么不同。
CSS 阴影的 “模糊半径”
对于 box-shadow 属性来说，blur 用于定义阴影的模糊半径。
示例 3：定义阴影的模糊半径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid silver;
box-shadow: 5px 5px 0px 0px red;
}
</style>
<script>
window.onload = function() {
var oInput = document.getElementsByTagName("input")[0];
var oSpan = document.getElementsByTagName("span")[0];
var oDiv = document.getElementsByTagName("div")[0];
oInput.onchange = function(){
var value = this.value;
oSpan.innerText = value;
oDiv.style.boxShadow = "5px 5px " + value + "px 0px red";
};
}
</script>
</head>
<body>
<input type="range" min="0" max="25" value="0">
<span>0</span>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，当我们拖动滑动条时，可以动态地观察 blur 变化时阴影形态的变化。
注意: 大面积的模糊阴影（高 blur 值）非常消耗浏览器渲染性能，尤其是在移动端。因此，应该适度使用。
CSS 阴影的 “尺寸大小”
对于 box-shadow 属性来说，spread 用于定义阴影的尺寸大小。
示例 4：定义阴影的尺寸大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid silver;
box-shadow: 5px 5px 0px 0px red;
}
</style>
<script>
window.onload = function(){
var oInput = document.getElementsByTagName("input")[0];
var oSpan = document.getElementsByTagName("span")[0];
var oDiv = document.getElementsByTagName("div")[0];
oInput.onchange = function(){
var value = this.value;
oSpan.innerText = value;
oDiv.style.boxShadow = "5px 5px 0px " + value + "px red";
};
}
</script>
</head>
<body>
<input type="range" min="0" max="25" value="0">
<span>0</span>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
当我们拖动滑动条时，可以动态地观察 spread 变化时阴影形态的变化。注意，这两个例子代码相似，但是每次改变的对象是不一样的。
CSS 内阴影与外阴影
对于 box-shadow 属性来说，参数 style 用于定义是内阴影还是外阴影。当参数 style 取值省略时，表示外阴影；当参数 style 取值为 inset 时，表示内阴影。
示例 5：内阴影与外阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-top: 10px;
}
#div1 {
box-shadow:0 0 12px 0px red;
}
#div2 {
box-shadow:0 0 12px 0px red inset;
}
</style>
</head>
<body>
<div id="div1">外阴影</div>
<div id="div2">内阴影</div>
</body>
</html>页面效果如下图所示。
分析：
默认情况下，边框阴影是外阴影效果。不过我们可以设置最后一个属性值为 inset，从而变为内阴影效果。这里要注意一个技巧，当 x-offset 和 y-offset 都为 0 时，阴影都是向外发散或者向内发散。之前很多初学的小伙伴想要实现这种效果，纠结半天也找不到解决方法，就是因为不知道这个小技巧。
4 个方向阴影独立样式
我们可以使用 box-shadow 属性为 4 个方向的边框定义独立的阴影效果。其中每条边的阴影属性值之间用英文逗号隔开。
语法：
box-shadow: 左阴影, 上阴影, 下阴影, 右阴影;示例 6：CSS 定义 4 个方向的阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { padding: 100px; }
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
box-shadow:-5px 0 12px red,
0 -5px 12px yellow,
0 5px 12px blue,
5px 0 12px green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
小伙伴们好好琢磨一下这个例子中的 x-offset 和 y-offset 是怎么取值的。
