如何快速實現多重邊框 | CSS實現邊框的4種方式

這是我參與8月更文挑戰的第10天，活動詳情查看：8月更文挑戰css

雙重邊框甚至多重邊框是設計上的經常使用樣式，如何用代碼實現呢？html

層疊DOM元素

最原始的方法天然是能夠經過層疊不一樣背景色的DOM元素來實現，經過調整DOM元素的大小和背景色從而實現設置多重邊界的目的。markdown

好比要實現兩個邊框，則須要至少編寫兩個包裹的DOM，內層DOM設置border爲第一層邊框，內層覆蓋外層後，外層漏出的部分顯示爲外層邊框。oop

實現效果以下圖所示：爲了說明層疊DOM效果，添加了一個動畫效果。post

具體實現代碼以下所示：動畫

<!DOCTYPE html>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
<style> body { background: black; } .outer { background: lightblue; width: 300px; height: 300px; margin: 50px; position: relative; } .inner { background: lightcoral; width: 200px; height: 200px; border: 25px solid lightgreen; position: absolute; top: 25px; left: 500px; animation: move 10s infinite; } @keyframes move { from { left: 500px; } to { left: 25px; } } </style>

</html>

複製代碼

可是這種方法繁瑣，且若是更多邊框的話會形成DOM過多，代碼一點兒都不優雅，很差，很差！ui

CSS除border外其餘實現邊框的方式

CSS除border外是否還有其餘實現邊框的方式呢？有的。spa

outline

該屬性爲設置DOM的輪廓。設計

MDN官方文檔：developer.mozilla.org/zh-CN/docs/…code

outline是outline-color，outline-style，outline-width的簡寫。

border 和 outline 很相似，但有以下區別：

outline不佔據空間，繪製於元素內容周圍。

根據規範，outline一般是矩形，但也能夠是非矩形的。

box-shadow

box-shadow是添加陰影的，那麼怎麼用它設置邊框呢？

該屬性可設置的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴散半徑和顏色，X軸偏移量、Y軸偏移量、模糊半徑均設置爲0，僅設置擴散半徑與顏色，則效果與邊框是同樣的。

並且，根據《CSS Secret》中闡述，box-shadow支持逗號分隔，如：box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;,

如何能夠很方便的給元素添加多重邊框。

以下圖爲一個複雜的多重邊框圖案，可是其代碼十分簡單

實現代碼：

<!DOCTYPE html>

<body>
    <div class="my-transparent">11111</div>
</body>
<style> body { background: black; } .my-transparent { margin-left: 100px; margin-top: 100px; border-radius: 10px; background: white; width: 300px; height: 300px; /*核心代碼*/ border: 10px solid hsla(0,0%,100%,.5); outline: 10px solid deeppink; box-shadow: 0 0 0 20px white, 0 0 0 30px green, 0 0 0 40px yellow, 0 0 0 50px blue; } </style>
</html>
複製代碼

總結

4種方式：

DOM重疊
border
outline: 不支持border-radius
box-shadow