css box-shadow知识点及多重边框

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圆角）