在 CSS 中設定內邊框

1. 在 CSS 中使用 box-sizing 屬性設定內邊框
2. 在 CSS 中使用 box-shadow 屬性設定內邊框
3. 在 CSS 中使用 outline 和 outline-offset 屬性設定內邊框

在本文中，我們將介紹在 CSS 中設定容器內部邊框的方法。容器內部的邊界稱為內邊界。

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

當我們為容器內的元素新增邊框或內邊距時，容器的大小會增加。大小將與初始大小不同。為了消除這個問題，我們可以給容器新增一個內邊框。

內邊框是在邊框和輪廓屬性或元素之間建立的空間。我們可以對錶格內容、影象以及段落和標題的文字應用內邊框。內邊框可以是矩形、正方形、圓形等任何形狀。

內邊框不會增加容器的大小，預定義的大小將保持不變。我們可以使用 box-sizing 屬性在 CSS 中建立一個內邊框。將 box-sizing 屬性設定為 border-box 將包括容器尺寸內的邊框和內邊距。

例如，通過將 box-sizing 屬性設定為 border-box 來設定 div 的樣式。將 div 的高度和寬度設定為 200px。接下來，建立一個 10px 寬度和 red 顏色的 solid 邊框。然後，將 background 屬性設定為 green。

在這裡，我們建立了一個尺寸為 200x200 px 的 div。即使我們新增了 10px 的邊框，容器的尺寸也沒有改變。邊界位於容器內。因此，我們可以使用 box-sizing 屬性在 CSS 中設定內邊框。

示例程式碼：

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

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

實現內邊框的另一種方法是使用 box-shadow CSS 屬性。使用該屬性，我們可以指定內嵌的陰影，看起來就像一個內邊界，而不是一個陰影。

我們可以將 box-shadow 的水平和垂直偏移值設定為前兩個值。其他三個值，blur、spread 和 color，是可選的。我們可以將擴散半徑設定為所需的值以建立陰影。然後，使用 inset 選項會將外部陰影更改為內部陰影。陰影將落在容器內。最後，它看起來像一個內邊框。

例如，將 div 的 height 和 width 屬性設定為 200px。將背景顏色設定為綠色。然後，使用 box-shadow 屬性並將前三個選項設定為 0px。設定擴散半徑，第四個選項為 10px。賦予顏色紅色並設定 inset 選項。

在這裡，我們使用 box-shadow 屬性建立了一個寬度為 10px 的內邊框。

示例程式碼：

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

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

我們可以使用 CSS 中的 outline 和 outline-offset 屬性設定內邊框。outline 屬性描述了元素的邊框大小、邊框型別和邊框顏色。outline-offset 屬性描述了邊框和輪廓元素之間的距離或空間。

例如，將 div 的高度和寬度設定為 200px。給綠色作為背景。接下來，將 outline 設定為 5px solid red。然後，將 outline-offset 設定為 -5px。

在這裡，outline 屬性在容器中建立了一個外邊框。使用 outline-offset 屬性並將其設定為邊框寬度的負值會將外邊框更改為內邊框。

示例程式碼：

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>