在 CSS 中設定內邊框

Subodh Adhikari 2023年2月20日 2021年12月20日
  1. 在 CSS 中使用 box-sizing 屬性設定內邊框
  2. 在 CSS 中使用 box-shadow 屬性設定內邊框
  3. 在 CSS 中使用 outlineoutline-offset 屬性設定內邊框
在 CSS 中設定內邊框

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

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

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

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

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

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

在這裡,我們建立了一個尺寸為 200x200 pxdiv。即使我們新增了 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 的水平和垂直偏移值設定為前兩個值。其他三個值,blurspreadcolor,是可選的。我們可以將擴散半徑設定為所需的值以建立陰影。然後,使用 inset 選項會將外部陰影更改為內部陰影。陰影將落在容器內。最後,它看起來像一個內邊框。

例如,將 divheightwidth 屬性設定為 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 中使用 outlineoutline-offset 屬性設定內邊框

我們可以使用 CSS 中的 outlineoutline-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>