在本文中，我將介紹以下兩者之間的區別：

• border
• outline
• box-shadow

我們還將討論您何時可以使用另一種方法。

CSS Box模型複習

這三種邊框方法之間的一個關鍵區別是它們放置在元素的位置以及它們如何影響元素的維度，這種行為是由CSS box模型控制的。

border 正是元素的邊界，位於其padding和margin之間，它的寬度將影響計算出的元素尺寸。

outline 在邊框旁邊但在邊框之外，與 box-shadow 和 margin 重疊，但不影響元素的尺寸。

默認情況下，box-shadow 從邊框的邊緣向外延伸，覆蓋定義方向的空間量，也不會影響元素的尺寸。

border 語法和用法

自網路誕生之初，邊框就已經成為設計的標準。

與我們將要介紹的其他兩種方法相比，一個重要的區別是，默認情況下，border 包含在元素的計算尺寸中。即使您設置 box-sizing：border-box，border 仍然會計入計算中。

Border 最基本的語法定義了邊框的寬度和樣式：

border: 3px solid;

如果未定義則默認顏色為 currentColor，這意味著它將在級聯中使用最接近的顏色定義。

但 border 有更多的樣式可供選擇，如果你願意，使用 border-style 你可以為每一面定義不同的樣式。

何時使用 border

當元素的尺寸允許樣式計算時，border 是一個可靠的選擇(雙關語)，默認樣式給了設計很大的靈活性。

outline 語法和用法

對於outline，使其可見的唯一必需屬性是提供一種樣式，因為默認值為 none：

outline: solid;

和border一樣，它將通過 currentColor 獲得顏色，它的默認寬度為 medium。

outline 的典型應用是通過本機瀏覽器樣式對 :focus 元素（如鏈接和按鈕）進行聚焦。

除非您能夠提供符合WCAG Success Criterion 2.4.7 Focus Visible的自定義 :focus 樣式，否則應該允許發生這種特定的應用，以達到無障礙的目的。

出於設計目的，通常要注意的 outline 問題是它無法從任何 border-radius 樣式繼承曲線。

何時使用 outline

當您不想影響元素的尺寸並且不需要其遵循 border-radius 時，可以使用outline線。

box-shadow 語法和用法

box-shadow 的最低要求屬性是 x 和 y 軸的值以及顏色：

box-shadow: 5px 8px black;

可以選擇添加第三個參數 blur 來製造模糊，第四個參數 spread 來添加模糊擴散程度。

要使用它來創建邊框，我們將 x 軸和 y 軸的值以及 blur 都設置為 0 ，然後為spread設置一個正數。

box-shadow: 0 0 0 3px blue;

這將在元素周圍創建邊框的外觀，甚至可以遵循所應用的 border-radius：

何時使用box-shadow

您可能更喜歡 box-shadow，特別是當您想為邊框設置動畫而不引起布局偏移時。下一節將演示這種情況的示例。

而且由於 box-shadow可以分層，所以它是一個全能的好工具，要了解它來增強你的布局。

但是，它將無法完全模仿 border 和 outline 提供的某些樣式。

放在一起

以下是一些可能需要使用 border 替代的實際情況。

按鈕邊框

當為有邊框和無邊框的按鈕提供樣式時，真實的 border 成為一個常見的問題，以及它們排列在一起的場景。

典型的解決方案通常是將無邊框按鈕的尺寸增加到等於 border-width 的大小

利用我們的新知識，另一種解決方案是使用 box-shadow 與 inset 關鍵字一起，將偽邊框視覺上置於按鈕內。

請注意，你的 padding 必須大於 border-width，以防止文本內容的重疊。

另外，也許您想在 :hover 或 :focus 上添加邊框。

使用真實的邊框，你會從布局轉變中產生不理想的視覺跳躍，因為邊框會短暫地增加這些狀態下的尺寸。

在這種情況下，我們可以使用 box-shadow 來創建偽邊框，這樣就不會增加真實的尺寸，另外我們還可以使用 transition 對其進行動畫處理。

這是上述示例的簡化代碼：

button {
  transition: box-shadow 180ms ease-in;
}

button:hover {
  box-shadow: 0 0 0 3px tomato;
}

確保可見焦點

對於可訪問性，您可能不知道的一種情況是Windows高對比度模式（WHCM）的用戶。

在這種模式下，你提供的顏色會被剝離成一個縮小的高對比度調色板，並非所有CSS屬性都是允許的，包括 box-shadow。

一個實際的影響是，如果你在 :focus 時去掉了 outline，而用 box-shadow 代替，WHCM的用戶將不再獲得可見的焦點。

要消除這種負面影響，您可以在 :focus 上應用透明的 outline：

button:focus {
  outline: 2px solid transparent;
}

outline和box-shadow的陷阱

因為outline和box-shadow位於盒模型的邊框之外，你可能會遇到的一個後果是讓它們在視口的邊緣下消失。所以，如果你想讓元素保持可見，你可能需要給元素添加 margin 或者給正文添加 padding 作為對策。

它們的位置也意味著它們可以被 overflow: hidden 或使用 clip-path 等屬性剪掉。

額外提示：漸變邊框

正如承諾的那樣，這裡有一個額外的提示——在我們已經討論過的方法中——只有 border 可以做到。

一個經常被遺忘的 border 相關屬性是 border-image，當試圖將它用於實際的圖像時，其語法可能有點奇怪。

但是它具有隱藏的功能——由於CSS漸變在技術上是圖像，因此它還可以創建漸變邊框：

這需要定義一個規則的邊框寬度和樣式(儘管它只顯示為實體，而不考慮樣式值)，然後是 border-image 屬性，它可以使用一個添加的漸變語法。在漸變之後的數字是 slice 值，對於我們的漸變，我們可以簡單地使用 1 來基本不改變漸變的大小/失真。

div {
  border: 10px solid;
  /* simplified from preview image */
  border-image: linear-gradient(to right, purple, pink) 1;
}

如果只把邊框放在一邊，一定要先把其他邊框設置為零，否則有些瀏覽器還是會把邊框加到所有邊框上。

div {
  border-style: solid;
  border-width: 0;
  border-left-width: 3px;
  /* border-image */
}

不利之處在於這些邊界不遵守 border-radius。