box-shadow属性值的详细解析

以第一个阴影：box-shadow: 10px 10px 20px 10px rgba(255,255,0,0.5)为例：

这段代码表示阴影的水平位置为右移10px；

垂直位置为下移10px；

第三个10px代表阴影的模糊程度blur，我们也将它设置成20px；

第四个10px是阴影半径的意思；最后一个规定了阴影的颜色为rgba(255,255,0,0.5)。

也就是说，我们为class为test的div元素添加了一个偏离框，并且向右距离为10px、向下距离为10px、模糊半径为10px、阴影半径为10px的浅黄色的阴影。

box-shadow: 10px 0px 10px rgba(0,0,0,0.9) /*阴影出现在元素的右侧*/

box-shadow: -10px 0px 10px rgba(0,0,0,0.9) /*阴影出现在元素的左侧*/

box-shadow: 0px -20px 10px rgba(0,0,0,0.9)/*阴影出现在元素上方*/ 

box-shadow: 0px 20px 10px rgba(0,0,0,0.9)/*阴影出现在元素下方*/