CSS经过描边获得双层边框

有时候，咱们在写页面效果时，为了达到双层边框的效果，（以下），首先想到的作法是用一个外层div嵌套内层的div，虽然这是一种很广泛的解决方法，可是会增长代码量也会比较冗余，今天看到一个css属性，outline，即给div添加一个outline的属性便可获得双层边框，固然，这个属性是CSS2版本就有的，平时我常常忽略到它，今天猛然发现，是一个很不错的属性。还有就是css3版本有一个outline-offset属性，outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。

轮廓在两方面与边框不一样：

• 轮廓不占用空间
• 轮廓多是非矩形

综上，获得双层边框能够：

【法一】：div {outline: 10px outset red;}同时能够给轮廓加一个偏移。

可是这种方法有一个弊端，就是若是div有圆角的话，会显示成以下：

【法二】：当边框出现圆角化时，就有另一种方法来解决：

    div {box-shadow: 0 0 0 10px green;}效果以下：

这个才是咱们想要的。通常来讲CSS3中的box-shadow是有四个属性值，分别是X和Y的偏移量，模糊度以及颜色，但在这儿咱们用了5个属性值，分别为X和Y的偏移量，模糊度，投影向外扩张的程度，颜色值。实际上，最外层显出来的边框并非真正的边框，而是投影。

 

 

【小知识】：

box-shadow 除了接受一个值之外，还能够接受一个列表值（逗号分隔），如：

div {

    box-shadow: 0 0 0 10px green,
                         0 0 0 20px yellow,
                         0 0 0 30px orange;

}

这个属性的好处是，扩张的绘制规则是根据元素样式自己的样式来绘制的，元素是矩形，用box-shadow绘制出来的就是规矩的矩形，若是元素是带圆角的，则绘制出来的轮廓就是带圆角的。