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绘制出来的就是规矩的矩形，如果元素是带圆角的，则绘制出来的轮廓就是带圆角的。

 

 

                    

 

转载于:https://my.oschina.net/u/2374203/blog/674586