<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 盒模型模块