css3-多重边框

1、box-shadow：第四个值的属性-扩张半径，通过指定正值或负值，可以让投影面积加大或减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影其实就像一道边框。它还支持逗号分隔语法，我们可以创建任意数量的投影。

　　例如：box-show:0 0 0 10px #655, 0 0 0 15px deeppink;

　　需要注意的是：

　　1）、投影的行为和边框不完全一致，因为它不会影响布局，而且也不会受到box-sizing的影响。可以通过内边距或外边距来额外模拟出边框所需要占据的空间。

　　2）、上述方法所创建出的假“边框”出现在元素的外圈。它们并不会响应鼠标事件，比如悬停或点击。如果这一点非常重要，可以给box-shadow属性加上inset关键字，来使投影绘制在元素内圈。此时需要增加额外的内边距来腾出足够的空间。

 

2、outline：适用于只需要两层边框的情况

　　例如：border：10px solid #655; outline: 5px solid deeppink;效果同上

　　还可以通过outline-offset属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。

　　需要注意的是：

　　1）、只适用于双层“边距”的场景。

　　2）、边框不一定会贴合border-radius属性产生的圆角。

 

转载于:https://www.cnblogs.com/sltk/p/10070627.html