在 CSS 中設定內邊框

「內邊框」可能指元素有邊框時仍維持宣告尺寸不變，也可能指在元素邊緣內側繪製可見描邊。若要達成前者，請使用 box-sizing: border-box；若要繪製清晰的內側描邊，請使用 box-shadow: inset；若要將外框線往內移，則可設定負值的 outline-offset。

在 CSS 中使用 box-sizing 屬性設定內邊框

box-sizing: border-box 會將元素的內距與邊框納入宣告的寬度和高度。它控制尺寸的計算方式，不會在元素內側另外繪製描邊。若要建立一個有 10px 紅色邊框的 200px 正方形，請使用 box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;。外部方框仍是 200×200 像素，而紅色邊框會占用其中一部分空間。如果內容需要與邊框保持距離，請加上 padding。使用預設的 content-box 時，寬度和高度只計算內容區域，因此內距和邊框會使外部尺寸增加。當元件必須符合已知的版面尺寸時，border-box 很實用；但它不能取代適當的邊框寬度設定。

這個獨立的 JavaScript 範例會輸出包含相同尺寸與邊框設定的 HTML：

const html = '<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>';
console.log(html);

<div style="box-sizing: border-box; width: 200px; height: 200px; border: 10px solid red; background: green;">Content</div>

將輸出的標記貼到 HTML 文件中，即可查看固定尺寸的正方形。

在 CSS 中使用 box-shadow 屬性設定內邊框

若要繪製可見描邊，又不改變元素的版面尺寸，請使用內嵌的 box-shadow。若要建立一個綠色的 200px 正方形，並加上 10px 紅色描邊，請將以下 CSS 設定套用到 <div>Content</div>：<div style="width: 200px; height: 200px; background: green; box-shadow: inset 0 0 0 10px red;">Content</div>。陰影的前兩個值分別是水平和垂直偏移；此處兩者都是零，因此描邊在每一側的寬度相同。第三個值是模糊半徑，設為零會形成銳利邊緣。第四個值是擴張半徑，在此範例中用來設定描邊厚度。inset 會將陰影繪製在方框內側。調整顏色或擴展半徑即可改變外觀；模糊半徑和擴展半徑在適當時可以省略，因為兩者的預設值都是零。由於陰影不會占用版面空間，附近元素的位置不會改變。如果也設定了邊框，邊框仍會保留，並可能遮住部分內嵌陰影。

在 CSS 中使用 outline 和 outline-offset 屬性設定內邊框

外框線會繪製在元素周圍，且不占用版面空間。若要將紅色外框線往內移，請在綠色背景的 200px 正方形 <div>Content</div> 上設定 outline: 5px solid red; outline-offset: -5px;。負值偏移會將外框線從外側邊緣往內容方向拉近，但不會讓外框線變成邊框。由於外框線會繪製在元素上方，可能會與邊緣附近的文字或其他內容重疊。如果可以接受這種覆蓋效果，就可使用此方法；若希望內側描邊留在元素的繪製範圍內，則可選擇 box-shadow。