大多数人使用box-shadow的方法是，指定三个长度值和一个颜色值
box-shadow: 2px 3px 4px rgba(0,0,0, .5);这句话的意思就是：
- 以该元素相同的尺寸和位置，画一个rgba(0,0,0, .5)的矩形．
- 把它右移２px，向下移３px
- 使用高斯模糊算法或类似算法将它进行４px的模糊处理．这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过度，近似于模糊半径的两倍，比如在这里就是８px.
- 接下来，模糊后的矩形与原始元素的交集部分会被切除掉，因此它看起来像是在该元素的后面．
使用４px的模糊半径意味着投影的尺寸会比元素本身的尺寸大约８px（上下左右各4px），因此投影的最外圈会从元素外显露出来．所以我们只需要改变偏移量，就可以把投影的顶部和左侧隐藏起来，只要这两个方向上的偏移量不小于4px就可以。
box-shadow: 5px 5px 4px rgba(0,0,0, .5);但是这样的话，在某种程度上会导致外露的投影太过浓重，看起来不美观。
另外就算勉强可以接受，我们想要的是单侧投影，而不是相邻的两侧。
最终的解决方案是box-shadow的第四个长度参数，它是扩张半径：
这个参数会根据你指定的值去扩大或（当指定负值时）缩小投影的尺寸。
举例来说，一个-5px的扩张半径会把投影的宽度和高度缩小10px - 每边各5px。因此如下时，完全没有投影：
box-shadow: 0px 0px 4px -4px rgba(0,0,0, .5);所以，此时给投影一个正的垂直偏移量就会产生单侧投影：
box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5);如果把单侧投影的方式运用两次就会得到双侧投影：
box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5),
0px -5px 4px -4px rgba(0,0,0, .5);最后是实验的全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 100px;
background: #ffff00;
box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5),
0px -5px 4px -4px rgba(0,0,0, .5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>