多重边框

CSS3多重边框

box-shadow方案

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
  优点：边框样式灵活，可以设置多种边框效果
  缺点：只适用于两层边框的情况