box-shadow（）

参数：

h-shadow:水平阴影的位置。允许负值。 v-shadow:垂直阴影的位置。允许负值。 blur:模糊距离。 spread:扩张半径（可正可负。投影面积则可大可小） color：阴影颜色 inset:将外部阴影 (outset) 改为内部阴影。

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

 

小应用：多重边框

box-shadow方案

一个正值的扩张半径加上水平、垂直为0的偏移量和为0的模糊度，得到的投影效果跟一道实线边框效果很像。   div{ box-shadow: 0 0 0 10px red; background: yellowgreen; }

效果图：

    这用border属性来生成完全一样的效果，一点问题没有。不过，它有一点好处在于，它支持逗号分隔法，我们完全可以创建任意数量的投影。border可以做到吗？no！   注意：box-shadow是层层叠加的，列如我还想在上面的效果图外面加个6px的外框，那么扩张半径则为(10px+6px)16px;   甚至你可以在边框底下再加一些常规的投影：   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圆角）