因为多重边框在 CSS 工作组被认为没有足够多的使用场景,border 这个属性是没办法直接实现这个效果,因此,就会想另辟蹊径的去实现,最简单的就是多个div去模拟实现,这个是最容易想到的办法,但也是最不友好的,我们通常是希望在 CSS 代码层面去调整,这样会更加灵活。
box-shadow 方案
box-shadow 这个属性我们或多或少都有用到过,但不太为人所知的是还可以有第四个参数(扩张半径),可以指定正负值,让投影面积加大或减小。此时,把偏移量和模糊值都设置为 0,就会展示出一条实线边框。
这个实现的展示效果和 border 实现效果完全一致,不过 box-shadow 的好处是,可以支持逗号分隔语法,可以创建出任意数量的投影。因此,就可以实现多重边框的需求:
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
[ps] box-shadow 是层层叠加的,第一层投影位于最顶层,以此类推。所以,边框的长度需要按规律进行调整,比如上面的例子,我们想得到外边框 5px 的效果,需要设置为 15px,而不是 5px。
当然,在此效果下,还可以再加入常规投影展示:
background: yellowgreen;
box-shadow: 0 0 0 10px #655,
0 0 0 15px deeppink,
0 2px 5px 15px rgba(0,0,0,0.6);
ps:
- 投影和边框是不完全一致的,因为投影不会影响布局,而且也不会受到 box-sizing 属性的影响。如果需要,就需要通过内外边距来模拟这个边框所占宽度。
- box-shadow 创建的边框效果是出现在元素的外圈,并不会响应鼠标事件,但是可以加入 inset 关键字,使投影绘制在元素内圈。此时需要加入内边距来给内部腾出绘制空间。
outline
在有些情况下,是只需要两次边框,这就只需要先设置一层 boder 边框,再加上 outline 来绘制外层的边框。这种方法一大优点就是边框样式十分灵活,不像 box-shadow 方案只能模拟实线边框。
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
另一个好处就是可以通过 outline-offset 来控制跟元素边缘之间的距离,甚至可以设置成负值。
ps:
- 只适用于两层边框,因为 outline 不支持用逗号分隔的多个值。
- 边框不一定会贴合 border-radius 产生的圆角。这个是被 CSS 工作组认为是 bug,以后可能会改为贴合border-radius 圆角。
- 根据 CSS 基本 UI 特性规范 所述,“描边可以不是矩形”。在多数情况下,描边都是矩形的,但若使用这个方法,还是要看最终展示效果。
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端!!!!! 欢迎大家来聊,有意向可发送简历到 chen_zhen@dahuatech.com,加入我们,可以一起进步,一起聚餐,一起旅游,让我们从世界村的小伙伴变成大华村的小伙伴。