背景知识:box-shadow,outline
鉴于使用场景的多元化,多重边框的设计越来越多,以往可以借助 border-image 属性应付一下,但是这个在css 代码层面并不是很灵活。现在我们借助 box-shadow 和 outline 两个属性来分别实现多重边框。
1、box-shadow 方案
思路:利用 box-shadow 的第四个参数(扩张半径)的大小,多重投影
代码示例:
<div class="border-multiple"> 多重边框实现方案一:box-shadow </div> .border-multiple { margin: 50px auto; padding: 20px; width: 600px; background-color: #fff; box-shadow: 0 0 0 10px #f0f, 0 0 0 15px #00f, 0 2px 15px 15px rgba( 0, 0, 0, .8); }
多重边框–box-shadow
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191223164521742.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pZRFgxODk4NDAwMzgwNg==,size_16,color_FFFFFF,t_70小结:
1、阴影并不影响布局,也不会受到box-sizing的影响
2、支持逗号分隔语法,可以创建任意数量的投影
3、缺点:只能实现实线的边框,不能实现其他样式的边框
2、outline 方案
代码示例:
<div class="border-outline"> 多重边框实现方案二:outline </div> .border-outline { margin: 200px auto;