在網頁設計中，我們常常需要為元素添加邊框裝飾。雖然基本的border屬性很實用，但當我們需要更複雜、更具層次感的裝飾時，就會想到box-shadow和偽元素（::before/::after）的美好。
本文將探討如何利用這兩種技術來實現一些巧妙的視覺效果。
💡 一、深入理解 box-shadow 的多層疊加
box-shadow 不僅僅用於製作陰影，它還能模擬多層邊框效果，而且可以控制每一層的顏色、大小和模糊度。
當我們使用外擴散半徑（第四個值，spread-radius）且不設定模糊半徑（第三個值為 0）時，box-shadow 就能變成一個清晰的彩色邊框。
範例分析：疊加邊框與遮蓋效果
透過設定多組 box-shadow 數值，可以利用多層疊加來製作豐富的邊框：
box-shadow:
0 0 0 5px #fff, /* 第一層：白色，外擴 5px */
0 0 0 10px #f39c12; /* 第二層：橘色，外擴 10px */
- 執行順序：
box-shadow屬性會按照撰寫的順序從前到後進行疊加渲染。
也就是說，
首先，一個橘色的實心「邊框」向外擴散了 10px（第二層）。
接著，一個白色的實心「邊框」向外擴散了 5px（第一層）。
由於第一層的白色陰影只擴散了 5px，它會完全覆蓋掉第二層橘色陰影的內側 5px 區域，從而形成中空邊框的效果。
最終效果：
- 結論： 通過將較小的白色陰影放在前面，我們成功地在主體元素周圍創建了一個兩層、不同顏色的裝飾性邊框。
- 然而，當網頁具有背景圖片時， 0 0 5px #fff, 的白色部分會遮擋住背景圖片，在視覺上非常的突兀！此時，我們可以透過偽元素製作邊框來解決此問題。
📐 二、偽元素 (::after) 實現精準的外部描邊
當遇到如上文所述的具有背景圖片的情況時，由於使用box-shadow製作的中空邊框必須一層一層向外堆疊，以透過遮擋的方式來實現中空邊線效果，使得背景圖片也會一同被遮擋。此時，該輪到偽元素 (::after)出場了。
範例分析：圓形元素的外部描邊
此範例透過在一個圓形元素的外部添加一個固定尺寸的偽裝元素，來實現中空邊線效果：
CSS
.circle{
position: relative;
}
.circle::after{
content: "";
width: 210px; /* 外部描邊的尺寸 */
height: 210px;
border: 5px solid #D0104C; /* 描邊樣式 */
border-radius: 50%;
position: absolute;left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
- 主體尺寸：
190pxx190px - 偽元素尺寸：
210pxx210px - 偽元素邊線尺寸：
10px
因此，可以實現外側邊框與內側圓形元素之間具有20px的間距，且最外側具有10px寬的邊框效果，具體效果如下：
為什麼選擇偽元素而不是 box-shadow？
- 獨立尺寸控制：偽元素的尺寸 (
210px) 以及邊線尺寸(10px)是獨立設定的，因此可以更直覺地改變邊框與主元素之間的間距、邊框尺寸、或者可以進一步添加動畫效果。 - 中空邊框：使用
border屬性可以確保邊框為精準的線條，而不是box-shadow透過疊加方式模擬出來的「實心」陰影，且因此，後方的背景圖片不會被遮擋。
這種做法非常適合在元素周圍添加一個與內容分離的、具備獨立行為（例如動畫、模糊）的裝飾性邊框。
🌈 番外篇：box-shadow 製作半圓形彩虹
偽元素有數量限制(::after、::before)，但box-shadow沒有極限！既然 box-shadow 這麼強大，我們就來玩點有趣的：使用它來製作一個彩虹！
完成了一個可愛的彩虹！
希望這篇文章能幫助您在使用 box-shadow 的疊加邏輯或者使用偽元素製作裝飾性邊框的應用，感謝收看！
