<box-edge>

語法

<visual-box> = content-box | padding-box | border-box /* the three <box> values */
<layout-box> = <visual-box> | margin-box /* the <shape-box> values */
<paint-box> = <visual-box> | fill-box | stroke-box
<coord-box> = <paint-box> | fill-box | stroke-box | view-box
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box

值

<box-edge>可以是<visual-box>、<layout-box>、<paint-box>、<coord-box>或<geometry-box>型別。

<visual-box>

指使用者在網頁上看到的為元素生成的矩形框。它包括元素的內容、內邊距和邊框。也稱為<box>，此值不包括外邊距區域。此值型別用於background-clip和overflow-clip-margin屬性。

<layout-box>

指元素佔用的空間，包括其內容、內邊距、邊框和外邊距。此值型別用於佈局和定位。也稱為<shape-box>，此值型別用於shape-outside屬性。

<paint-box>

指佈局框內用於視覺渲染內容的區域。這包括繪製元素背景和邊框的區域。由於元素的繪製區域不包括其外邊距，因此此值不包括margin-box。

<coord-box>

指用於在其父容器中定位和調整元素大小的座標框。它用於控制內容如何圍繞框的邊緣流動。它不包括外邊距區域。此值型別用於offset-path屬性。

<geometry-box>

定義基本形狀的參考框，或者如果單獨指定，則導致指定框的邊緣（包括任何角部形狀，例如border-radius）作為剪下路徑。此值型別用於clip-path、mask-clip和mask-origin屬性以及SVG clip-path屬性。

關鍵詞

<box-edge>關鍵字定義如下

content-box

指盒模型內容區域的外邊緣。內容框是最裡面的框。內容區域包含實際內容，例如文字、影像或其他HTML元素。在SVG中，此值被視為fill-box。

padding-box

指盒模型內邊距的外邊緣。如果某一邊沒有內邊距，則該值與content-box相同。在SVG中，padding-box被視為fill-box。內邊距區域圍繞內容區域，從內容框的外邊緣開始。

border-box

指盒模型邊框的外邊緣。如果某一邊沒有邊框，則該值與padding-box相同。在SVG中，border-box被視為stroke-box。邊框區域圍繞內邊距區域，從內邊距框的外邊緣開始。

margin-box

指盒模型外邊距的外邊緣。如果某一邊沒有外邊距，則該值與border-box相同。在SVG中，margin-box被視為stroke-box。

fill-box

指SVG中的物件邊界框。在CSS中，fill-box被視為content-box。它用於將內容包裹在coord-box值定義的邊緣周圍。

stroke-box

指SVG中的描邊邊界框。在CSS中，stroke-box被視為border-box。它用於在應用描邊時定義元素的形狀。

view-box

指最近的SVG視口元素的原始框。原始框是一個矩形，其寬度和高度與該元素由viewBox屬性建立的初始SVG使用者座標系相同。原始框的定位方式使其左上角錨定在座標系原點。在CSS中，view-box被視為border-box。

注意：當SVG視口未錨定在原點時，原始框與SVG視口不對應。

規範

另見

• CSS 盒模型模組