box-shadow属性详解
1、box-shadow属性语法
box-shadow属性接受值最多由五个不同的部分组成。
box-shadow: offset-x offset-y blur spread color position;
换句说:对象选择器{box-shadow:X轴偏移量Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色投影方式}
不像其它的属性，比如border，它们的接受值可以被拆分为一系列子属性，box-shadow属性没有子属性。这意味着记住这些组成部分的顺序更加重要，尤其是那些长度值。
2、offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在x轴的位置。值为正数时，阴影在元素的右侧;值为负数时，阴影在元素的左侧。
.left { box-shadow : 20px 0px 10px Opx rgba(0,0,0,0.5)}
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5)}
3.offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在y轴的位置。值为正数时，阴影在元素的下方;值为负数时，阴影在元素的上方。
.left { box-shadow: Qpx 20px 10px 9px. rgba(0,0,0,0.5)}
.right { box-shadow: Qpx-20px 10px 9px rgba(0,0,0,0.5)}
4.blur
第三个长度值代表了阴影的模糊半径，举例来说，就是你在设计软件中使用高斯模糊滤波器带来的效果。值为0意味着该阴影是固态而锋利的，完全完全没有模糊效果。blur值越大，阴影则更不锋利而更朦胧/模糊。负值是不合法的，会被修正成0。
.left { box-shadow: 0px 9px 9px 99x 59ba(0,0,0,0.5)}
.middle { box-shadow: 9px. 9px 20px 9px. 5aba(0,0,0,0.5)}
.right { box-shadow: 9px. 9px 59px 9px rgba(0,0,0,0.5)}
5.spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。
.left { box-shadow: 9px 9px 9px. 9px.59ba(0,0,0,0.5)}
.middle { box-shadow: Qpx. 9px. 29px, 29px. rgba(0,0,0,0.5)}
.right { box-shadow: 9px.Qpx. 59px 509x 5gba(0,0,0,0.5)}
6.color
color部分的值正如你所预料的，是指阴影的颜色。它可以是任意的颜色单元(见在CSS中与颜色打交道)。
.left { box-shadow: 9px 9px. 20px 19px #67b3dd }
.right { box-shadow: 9px 9px. 29px 10px rgba(0,0,0,0.5)}
7.position
此参数是一个可选值，如果不设值，其默认的投影方式是外阴影; 如果取其唯一值"inset",就是将外阴影变成内阴影，也就是说设置阴影类型为“inset"时，其投影就是内阴影。
.left { box-shadow: Qpx 9px. 29px 19px #67b3dd }
.right { box-shadow: Opx 0px 20px 10px rgba(0,0,0,0.5) inset}
