cssboxshadow知识点及多重边框

参数：

h-shadow:水平阴影的位置。允许负值。

v-shadow:垂直阴影的位置。允许负值。

blur:模糊距离。

spread:扩张半径（可正可负。投影面积则可大可小）

color：阴影颜色

inset:将外部阴影 (outset) 改为内部阴影。

　IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

小应用：多重边框

box-shadow方案

div{         
     box-shadow: 0 0 0 10px red;
     background: yellowgreen;     
     }

div{  
     box-shadow: 0 0 0 10px red,
　　　　　　　　　　0 0 0 16px green,
　　　　　　　　　　0 2px 5px 16px rgba(0,0,0,.5);     
     background: yellowgreen;
     
     }

outline方案

如果你只需要二层边框，outline不错。先设置常规的border边框，再加上outline（描边），它比上面的box-shadow的一大优点就是，可以生成虚线等边框。

上面效果图用outline可以这样写：

div{	
　　　　border: 10px solid red;
　　　　outline: 6px solid green;

　　　　background: yellowgreen;

}

　　描边的另一个好处是，可以通过outline-offset属性来控制它跟元素边缘之间的间距。可以接受负值。看个效果图：

 div{ 
     outline: 3px dashed white;
     background: black;
     outline-offset: -25px;
     }

注意点：

这个outline方案只适用于双层边框的场景，如需多重边框，前一种方案就很好用了。

如果元素边框是圆角，那么描边可能还是直角。（是一个bug,未来可能贴合border-radius圆角）