怎么实现多重边框？

方法1:利用描边(outline)属性==实现双重

/**案例:**/
.borders {
    
    
     border: solid 6px #fff;
     outline: solid 6px #888;  
}

方法2:使用边框样式为double

/*案例:*/
.box{
    
    
     border:10px dashed gray;
}

方法3:利用额外的DIV外层多嵌套几层div
方法4:利用伪元素（:before）的方式实现双重边框,但是属于CSS中的hack问题,不推荐使用

<div class="borders base">利用伪元素实现双重边框</div>
<style>
.borders {
    
    
    border: solid 6px #fff;
    position: relative;
}
.borders:before {
    
    
    content: "";
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    border: solid 6px #888;
}
.base {
    
    
    background: #222;
    padding: 4rem 2rem;
    color:#fff;
    font-weight: bold;
    text-align: center;
    margin: 1rem;
}
</style>

方法5:使用box-shadow阴影实现对应的多边框效果
方法6:使用多背景属性:background:url1() no-repeat,url2() no-repeat,url3() no-repeat

陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐