CSS3多重边框
box-shadow方案
利用box-shadow属性实现多重边框
box-shadow
的第四个属性称为“扩张半径”,通常指定正值或负值,来控制投影面积的增大或减小,若将垂直和水平的阴影位置置为0,加上一个正值的扩张半径,那么看起来就像一个实线边框,我们也可用border
属性实现相同的效果。
box-shadow
的优点在于它支持逗号分隔语法,可以创建任意数量的投影
css代码:
.div_border{
margin: 200px auto;
height: 100px;
width: 100px;
background: brown;
box-shadow: 0 0 0 10px #dddddd, 0 0 0 20px #c4c2c2, 0 0 0 25px #727171;
}
效果图
注意
1. box-shadow是层层叠加的,第一层投影位于最顶层,因此我们在设置扩张半径的时候要按照规律去叠加
2. 投影的行为跟边框不完全一致, 因为它不会影响布局, 而且也不会受到 box-sizing 属性的影响。 不过, 你还是可以通过内边距或外边距( 这取决于投影是内嵌和还是外扩的) 来额外模拟出边框所需要占据的空间。
3. 上述方法所创建出的假“边框”出现在元素的外圈。 它们并不会响应鼠标事件, 比如悬停或点击。 如果这一点非常重要, 你可以给box-shadow 属性加上inset
关键字, 来使投影绘制在元素的内圈。请注意, 此时你需要增加额外的内边距来腾出足够的空隙
outline方案
如果某些情况下,只需要两层边框,那就可以先用border
设置一层普通的边框,然后用outline
属性产生外层边框即可。
案例:outline实现缝边效果
css代码:
.div_border{
margin: 200px auto;
height: 100px;
width: 200px;
background: #655;
border-radius: 10px;
outline: 2px dashed white;
outline-offset: -10px;
}
效果图
优缺点比较
- box-shadow
优点:支持逗号分隔语法可以模拟出任意数量的边框,适用于多层边框的场景
缺点:只能模拟实线边框 - outline
优点:边框样式灵活,可以设置多种边框效果
缺点:只适用于两层边框的情况