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

• border
• outline
• box-shadow

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

CSS Box模型復(fù)習(xí)

這三種邊框方法之間的一個(gè)關(guān)鍵區(qū)別是它們放置在元素的位置以及它們?nèi)绾斡绊懺氐木S度，這種行為是由CSS box模型控制的。

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

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

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

border 語法和用法

自網(wǎng)絡(luò)誕生之初，邊框就已經(jīng)成為設(shè)計(jì)的標(biāo)準(zhǔn)。

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

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

border: 3px solid; 

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

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

何時(shí)使用 border？

當(dāng)元素的尺寸允許樣式計(jì)算時(shí)，border 是一個(gè)可靠的選擇(雙關(guān)語)，默認(rèn)樣式給了設(shè)計(jì)很大的靈活性。

outline 語法和用法

對于outline，使其可見的唯一必需屬性是提供一種樣式，因?yàn)槟J(rèn)值為 none：

outline: solid; 

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

outline 的典型應(yīng)用是通過本機(jī)瀏覽器樣式對 :focus 元素(如鏈接和按鈕)進(jìn)行聚焦。

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

出于設(shè)計(jì)目的，通常要注意的 outline 問題是它無法從任何 border-radius 樣式繼承曲線。

何時(shí)使用 outline？

當(dāng)您不想影響元素的尺寸并且不需要其遵循 border-radius 時(shí)，可以使用outline線。

box-shadow 語法和用法

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

box-shadow: 5px 8px black; 

可以選擇添加第三個(gè)參數(shù) blur 來制造模糊，第四個(gè)參數(shù) spread 來添加模糊擴(kuò)散程度。

要使用它來創(chuàng)建邊框，我們將 x 軸和 y 軸的值以及 blur 都設(shè)置為 0 ，然后為spread設(shè)置一個(gè)正數(shù)。

box-shadow: 0 0 0 3px blue; 

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

何時(shí)使用box-shadow？

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

而且由于 box-shadow可以分層，所以它是一個(gè)全能的好工具，要了解它來增強(qiáng)你的布局。

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

放在一起

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

按鈕邊框

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

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

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

請注意，你的 padding 必須大于 border-width，以防止文本內(nèi)容的重疊。

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

使用真實(shí)的邊框，你會從布局轉(zhuǎn)變中產(chǎn)生不理想的視覺跳躍，因?yàn)檫吙驎虝旱卦黾舆@些狀態(tài)下的尺寸。

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

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

button { 
  transition: box-shadow 180ms ease-in; 
} 
 
button:hover { 
  box-shadow: 0 0 0 3px tomato; 
} 

確保可見焦點(diǎn)

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

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

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

要消除這種負(fù)面影響，您可以在 :focus 上應(yīng)用透明的 outline：

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

outline和box-shadow的陷阱

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

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

額外提示：漸變邊框

正如承諾的那樣，這里有一個(gè)額外的提示——在我們已經(jīng)討論過的方法中——只有 border 可以做到。

一個(gè)經(jīng)常被遺忘的 border 相關(guān)屬性是 border-image，當(dāng)試圖將它用于實(shí)際的圖像時(shí)，其語法可能有點(diǎn)奇怪。

但是它具有隱藏的功能——由于CSS漸變在技術(shù)上是圖像，因此它還可以創(chuàng)建漸變邊框：

這需要定義一個(gè)規(guī)則的邊框?qū)挾群蜆邮?盡管它只顯示為實(shí)體，而不考慮樣式值)，然后是 border-image 屬性，它可以使用一個(gè)添加的漸變語法。在漸變之后的數(shù)字是 slice 值，對于我們的漸變，我們可以簡單地使用 1 來基本不改變漸變的大小/失真。

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

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

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

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