<box-edge>

<visual-box> = content-box | padding-box | border-box /* the three <box> values */
<layout-box> = <box> | margin-box /* the <shape-box> values */
<paint-box> = <box> | fill-box | stroke-box
<coord-box> = <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。它用于定义应用描边时元素的形状。

视口框

指最近的 SVG 视口元素的原点框。原点框是一个矩形，其宽度和高度由该元素的viewBox 属性建立的初始 SVG 用户坐标系确定。原点框的位置使其左上角锚定在坐标系原点。在 CSS 中，view-box 被视为 border-box。

注意：当 SVG 视口未锚定在原点时，原点框不对应于 SVG 视口。

• CSS 盒模型 模块