css中按钮如何实现多边框

CSS中的按钮往往只有一个边框，但有时您可能需要自定义多个边框以获得更好的设计效果。下面是如何在CSS中实现多边框的一些方法。

.button{
    border: 2px solid #000;
    border-radius: 5px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000;
} 

以上CSS代码创建了一个具有两个边框的按钮。第一个边框是2像素宽的黑色实线边框，第二个边框是3像素宽的白色虚线边框以及5像素宽的黑色实线边框。 按钮的圆角使用border-radius属性设置，box-shadow属性用于添加虚线边框。

.button{
    position: relative;
}
.button:before,
.button:after{
    content: "";
    position: absolute;
    z-index: -1;
}
.button:before{
    border: 5px solid #000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.button:after{
    border: 5px solid #fff;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
} 

以上CSS代码用:before和:after伪元素来创建两个内部边框的按钮。第一个伪元素的边框是5像素宽的黑色实线边框，它覆盖整个按钮。 第二个伪元素的边框是5像素宽的白色实线边框，它与按钮距离2像素。 在这种情况下，按钮的圆角由伪元素的位置决定。

通过这两种方法，您可以在CSS中实现具有多个边框的按钮，这将增加您在设计网站时的灵活性。