CSS通过描边得到双层边框

原创
2016/05/13 13:56
阅读数 1K

有时候,我们在写页面效果时,为了达到双层边框的效果,(如下),首先想到的做法是用一个外层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绘制出来的就是规矩的矩形,如果元素是带圆角的,则绘制出来的轮廓就是带圆角的。

 

 

                    

 

展开阅读全文
加载中

作者的其它热门文章

打赏
3
1 收藏
分享
打赏
0 评论
1 收藏
3
分享
返回顶部
顶部