CSS實現(xiàn)多重邊框功能非常直觀，只需要利用border屬性的重復使用即可。

.box {
width: 200px;
height: 200px;
border: 10px solid #f00;
border-style: double dashed dotted solid;
border-width: 10px 20px 30px 40px;
}

如上所示，可以將各個方向的邊框?qū)挾确謩e設置，利用border-style可以設置不同的邊框樣式，從而實現(xiàn)多重邊框效果。

此外，可以利用::before和::after偽元素實現(xiàn)更加靈活的多重邊框效果，例如：

.box::before {
content: "";
display: block;
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 20px solid #0f0;
}
.box::after {
content: "";
display: block;
position: absolute;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
border: 30px solid #00f;
}

如上所示，利用偽元素先繪制出兩個“外圍”的邊框，此時.box元素內(nèi)容區(qū)域的位置應當使用position:relative來設置。如果要實現(xiàn)不同色彩和樣式的多重邊框，只需要逐層添加偽元素即可。