boxshadow

CSS box-shadow 属性用于在元素的框架上添加阴影效果。可以在同一个元素上设置多个阴影效果，并用逗号将它们分隔开。

几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了border-radius属性，那么阴影也会有圆角效果。多个阴影在Z轴上的顺序和多个text shadows 规则相同（第一个阴影在最上面）。

语法：

1 box-shadow: <length> <length> <length>?<length>?||<color>2 
3 box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色

取值：

　　投影方式：此参数是一个可选值，如果不设值，默认阴影在边框外，即阴影向外扩散；如果取其唯一值"inset"，会使得阴影落在盒子内部，这样子看起来就像是内容被压低了，此时阴影会在边框之内、背景之上、内容之下。

　　X-offset：是指阴影水平偏移量，正值阴影则位于元素右边，负值阴影则位于元素左边。

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow； 10px 0 0 0 red;
7     }
8 </style>

效果：

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow； -10px 0 0 0 red;
7     }
8 </style>

效果：

　　Y-offset：是指垂直偏移量，正值阴影则位于元素下方，负值阴影则位于元素上方。

　　阴影模糊半径(blur-radius)：此参数可选，但其值只能为正值，如果其值为0，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow； 0 0 50px 0 red;
7     }
8 </style>

效果：

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow； inset 0 0 50px 0 red;
7     }
8 </style>

添加inset关键字的效果：

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow； 100px 0 50px 0 red;
7     }
8 </style>

效果：

　　阴影扩展半径(spread-radius)：此参数可选，其值可以是正值或负值，如果值为正，则整个阴影都延展扩大，反之，值为负，则缩小。默认是0，此时阴影与元素一样大。需要考虑inset。

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow； 0 0 0 50px red;
7     }
8 </style>

效果：

1 <style>
2     div {
3          100px;
4         height: 100px;
5         border: 2px solid black;
6         box-shadow: inset 0 0 0 50px red;
7     }
8 </style>

添加inset关键字的效果：

　　阴影颜色(color)：此参数可选，如果设定任何颜色，浏览器会取默认色，但各浏览器默认色不一样，特别是webkit内核下的Safari和Chrome浏览器会是透明色，建议不要省略该参数。

当x-offset,y-offset和blur-radius都是0，盒阴影将是一个四边都是一样长的带有颜色的outline。当设置了多个阴影时，阴影绘制由最后一个开始，故第一个设置的阴影将覆盖在后设置的阴影之上。

通常在元素上增加一个大小为最大阴影宽度的margin值以保证阴影不会覆盖到相邻的元素或者覆盖到元素的border上。box-shadow属性不会影响到盒模型的构成。

1 <style>
2     div {
3         border: 2px solid black;
4         box-shadow: 0 0 0 2em #F4AAB9, 0 0 0 4em #66CCFF;
5         margin: 4em;
6         padding: 1em;
7     }
8 </style>

效果：