CSS設計：活用box-shadow與偽元素打造多層次邊框與視覺效果

在網頁設計中，我們常常需要為元素添加邊框裝飾。雖然基本的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%);
}

• 主體尺寸：190px x 190px
• 偽元素尺寸：210px x 210px
• 偽元素邊線尺寸：10px

因此，可以實現外側邊框與內側圓形元素之間具有20px的間距，且最外側具有10px寬的邊框效果，具體效果如下：

為什麼選擇偽元素而不是 box-shadow？

1. 獨立尺寸控制：偽元素的尺寸 (210px) 以及邊線尺寸(10px)是獨立設定的，因此可以更直覺地改變邊框與主元素之間的間距、邊框尺寸、或者可以進一步添加動畫效果。
2. 中空邊框：使用 border 屬性可以確保邊框為精準的線條，而不是 box-shadow 透過疊加方式模擬出來的「實心」陰影，且因此，後方的背景圖片不會被遮擋。

這種做法非常適合在元素周圍添加一個與內容分離的、具備獨立行為（例如動畫、模糊）的裝飾性邊框。

🌈 番外篇：box-shadow 製作半圓形彩虹

偽元素有數量限制(::after、::before)，但box-shadow沒有極限！既然 box-shadow 這麼強大，我們就來玩點有趣的：使用它來製作一個彩虹！

完成了一個可愛的彩虹！

希望這篇文章能幫助您在使用 box-shadow 的疊加邏輯或者使用偽元素製作裝飾性邊框的應用，感謝收看！