box-shadow 以由逗号分隔的列表来描述一个或多个阴影效果。该属性可以让几乎所有元素的边框产生阴影。如果元素同时设置 了 border-radius ，阴影也会有圆角效果。多个阴影的z-ordering 和多个 text shadows 规则相同(第一个阴影在最上面)。
标准写法：
box-shadow :1px 1px 4px red
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
当x偏移量为正时， 阴影是在右边，为负时则在左边
当y偏移量为正时，阴影是在下边，为负时则在上面
如 box-shadow: 1px -8px 4px red;表示为右边阴影1px,y偏移为顶部阴影为8px,阴影模糊半径为4px,阴影颜色为红色
效果如图：
三个参数的写法，
/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
偏移量的方向是一样的
如：box-shadow: 10px 5px teal;
五个参数的写法：
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
偏移量的方向也是一样的；
如：box-shadow: 7px 8px 4px 2px rgba(0, 0, 255, .2);
阴影向内的写法用inset
/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;
这里的偏移量是和上面的外阴影相反的，
当x偏移量为正时， 阴影是在左边，为负时则在负边
当y偏移量为正时，阴影是在上边，为负时则在下边
如：box-shadow: inset -2em 0.5em gold;
添加多个阴影的写法：
/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;
如：box-shadow: 7px 8px red, -8em 0.9em olive;（这里有两块阴影，分别的红色的向右偏移7px，向下便宜8px和olive颜色的向左便宜8rm,向下便宜0.9em），效果如图所示
/*/文档钟的取值说明
不使用inset，默认阴影在边框外，即阴影向外扩散。
使用 inset 后，阴影在边框内（即使是透明边框），即阴影向内扩散，背景之上内容之下。
<offset-x> <offset-y>
这是头两个 <length> 值，用来设置阴影偏移量。x,y 是按照数学二维坐标系来计算的，只不过y垂直方向向下。 <offset-x> 设置水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。 <offset-y> 设置垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。可用单位请查看 <length> 。
如果两者都是0，那么阴影位于元素后面。这时如果设置了<blur-radius> 或<spread-radius> 则有模糊效果。需要考虑 inset
<blur-radius>
这是第三个 <length> 值。值越大，模糊面积越大，阴影就越大越淡。 不能为负值。默认为0，此时阴影边缘锐利。需要考虑 inset
<spread-radius>
这是第四个 <length> 值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大。需要考虑 inset
<color>