CSS 边框与盒子装饰模块 第4级

1. 简介

本模块的属性用于装饰边框区域。 同时还定义了可以应用于盒子的装饰效果。

1.1. 模块交互

本规范扩展了 CSS 背景与边框模块第3级[CSS3BG]中与边框和盒子装饰相关的部分。

它为新增的corner-*-shape和border-shape属性，以及 border-*-radius、box-shadow-* 等逻辑简写属性和 通过border-limit与border-*-clip 属性实现的部分边框，提供了规范说明。

本模块中的所有属性都适用于::first-letter 伪元素。 border-radius 属性还适用于 ::first-line 伪元素。 UA 可以（但不是必须） 将border-image或 box-shadow属性应用于::first-line。 UA 不得 将border-color/style/width 属性应用于 ::first-line。[CSS2]

1.2. 值定义

本规范遵循CSS 属性定义惯例，并采用[CSS2]中， 值定义语法的方式，详见[CSS-VALUES-3]。 本规范未定义的值类型在 CSS 值与单位 [CSS-VALUES-3]中定义。 与其他 CSS 模块组合使用时，可能扩展这些值类型的定义。 例如，与CSS Images组合时，可用 CSS 渐变作为background-image 或 border-image 值。[CSS-IMAGES-3]

除其定义中列出的专用属性值外， 本规范定义的所有属性 也接受全局 CSS 关键字作为属性值。 为了可读性，未一一重复列出。

2. 边框

边框 可以是预定义样式 （实线、双线、点线、伪3D边框等）， 也可以是图像。 在前一种情况下，通过多个属性定义 边框的样式（border-style）， 颜色（border-color）， 以及粗细（border-width）。

2.1. 线条颜色：border-color 属性

这些属性设置边框的前景颜色，所应用的边框由border-style 属性指定。

由 <image-1D> 定义的条纹会沿着边框所在的那一侧绘制， 并且按照带状从 内边距边缘向外延展。 每个点的边框宽度 决定了该点条纹的总宽度。

.foo {
  border: 30px solid;
  border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
}

border-color 是一个为四个物理 border-*-color 属性服务的简写属性。 四个值分别设置上、右、下、左边框。 缺少左侧时跟右侧一致， 缺少底部时跟顶部一致， 也可以右侧缺省跟顶部一致。 每个列表项单独解析。

流向相关属性border-block-start-color、border-block-end-color、border-inline-start-color 和 border-inline-end-color 对应 物理属性 border-top-color、border-bottom-color、border-left-color 和 border-right-color。 具体映射取决于元素的 writing-mode、direction 和 text-orientation。

这两个简写属性分别设置border-block-start-color与border-block-end-color， 以及 border-inline-start-color 与 border-inline-end-color。 第一个值表示start侧颜色， 第二个值表示end侧颜色。 若只给一个值， 则同时应用于start和end侧。

2.2. 线条样式：border-style 属性

这些属性控制是否显示边框，以及如果显示，边框以何种样式绘制（如果未被边框图像覆盖）。

流向相关属性 border-block-start-style、border-block-end-style、border-inline-start-style， 和 border-inline-end-style 对应于物理属性 border-top-style、border-bottom-style、border-left-style， 和 border-right-style。 具体映射取决于元素的 writing-mode、direction 和 text-orientation。

这两个简写属性分别设置 border-block-start-style 与 border-block-end-style，以及 border-inline-start-style 与 border-inline-end-style。 第一个值表示 start 侧的样式， 第二个值表示 end 侧的样式。 若仅给出一个值，则同时应用于 start 和 end 侧。

border-style 是四个物理 border-*-style 属性的简写属性。 四个值分别设置上、右、下、左边框的样式。 若缺少左侧值则与右侧相同， 缺少底部值则与顶部相同， 若缺少右侧值也与顶部相同。 每个列表项单独解析。

样式以 <line-style> 关键字指定，其定义为：

<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

这些值具有以下含义：

none

无边框。 颜色和宽度被忽略（即边框宽度为 0）。 注意，这意味着 border-image-width 的初始值也将解析为 0。

hidden

与 none 相同， 但在边框折叠表格的边框冲突解析规则中表现不同 [CSS2]。

dotted

一系列圆点。

dashed

一系列方形端点的短划线。

solid

单条线段。

double

两条平行的实线，中间带有空隙。 （线条的厚度未被指定， 但线条与空隙的总和必须等于 border-width。）

groove

看起来像是刻入画布的效果。 （这通常通过使用两种比指定的 border-color 略亮和略暗的颜色来制造“阴影”实现。）

ridge

看起来像是从画布中凸起的效果。

inset

看起来像是边框内的内容凹入画布。 在折叠边框模型中被视为 ridge。[CSS2]

outset

看起来像是边框内的内容从画布中凸出。 在折叠边框模型中被视为 groove。[CSS2]

边框绘制在元素背景之前，但位于元素内容之后（如果有重叠）。

注意： 接近黑色或白色的边框颜色可能需要与中间色不同的颜色计算方式，以便产生 groove、ridge、inset 或 outset 所需的“3D”效果。

注意： 无法控制点和划线的间距，也无法控制划线的长度。鼓励实现选择一种能使角部对称的间距。

2.3. 线条粗细：border-width 属性

这些属性指定边框的厚度，即 边框宽度。 其中

<line-width> = <length [0,∞]> | thin | medium | thick

负值无效。 thin、medium 和 thick 关键字 分别等同于 1px、3px 和 5px。

流向相关属性 border-block-start-width、border-block-end-width、border-inline-start-width， 和 border-inline-end-width 对应于物理属性 border-top-width、border-bottom-width、border-left-width， 和 border-right-width。 具体映射取决于元素的 writing-mode、direction 和 text-orientation。

这两个简写属性分别设置 border-block-start-width 与 border-block-end-width，以及 border-inline-start-width 与 border-inline-end-width。 第一个值表示 start 侧的宽度， 第二个值表示 end 侧的宽度。 若仅给出一个值，则同时应用于 start 和 end 侧。

border-width 是四个物理 border-*-width 属性的简写属性。 四个值分别设置上、右、下、左边框的宽度。 若缺少左侧值则与右侧相同， 缺少底部值则与顶部相同， 若缺少右侧值也与顶部相同。 每个列表项单独解析。

注意： 虽然初始宽度为 medium，但初始样式为 none；因此初始的使用值宽度为 0。

2.4. 边框简写属性

这些简写属性设置盒子的某一侧border-width、border-color 和 border-style。 省略的值会被设置为它们的初始值。

流向相关属性border-block-start、border-block-end、border-inline-start 和 border-inline-end 对应物理属性 border-top、border-bottom、border-left 和 border-right。 相应映射取决于元素的writing-mode、direction 和 text-orientation。

这两个简写属性分别设置 border-block-start 与 border-block-end 或 border-inline-start 与 border-inline-end 均为相同样式。

border 属性是为盒子的四条边同时设置相同border-width、border-color 和 border-style 的简写属性。 与简写属性 margin 和 padding 不同， border 属性不能为四条边设置不同的值。 若需分别设置，必须使用一个或多个其它边框属性。

border 简写也会将 border-image 重置为其初始值。 因此建议作者使用 border 简写来覆盖级联中较早的任何边框设置， 以确保 border-image 也被重置， 使新样式生效。

注意： CSS 工作组计划在未来的 CSS 级别中让 border 简写也能重置所有边框相关属性。 例如，如果将来新增 border-characters 属性 用于允许字形作为边框， 它也会被 border 简写重置。 通过用 border 简写重置边框， 作者能确保无论未来出现何种新属性都能得到一块“空白画布”。

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

由于这些属性功能部分重叠，声明规则的顺序很重要。

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

3. 圆角

内边距边缘（内边框）半径为 外边框半径减去相应的边框厚度。 如果该结果为负值， 内半径取零。 （在这种情况下，边框内曲线的中心可能不会与外曲线中心重合。） 同理，内容边缘半径为 内边距边缘半径减去相应的内边距， 如果为负则取零。 曲线区域内的边框和内边距厚度由相邻边两侧插值确定， 当两相邻边的边框厚度不同， 圆角处会展示出从厚到薄的平滑过渡。

所有边框样式（实线，点线，内嵌 等）都沿边框曲线显示。

注意：如果圆角外曲线的中心 超过了对边的内边距边缘（即起源于圆角对边的边框区域）， 内曲线将不是完整的四分之一椭圆。

p { width: 70px; height: 70px; border: solid 30px; border-color: orange orange silver silver; border-top-right-radius: 100%; }

外边距边缘由于位于边框边缘之外， 其半径通过加上对应外边距厚度来计算，并应用相应的外扩调整后边框半径。

3.1. 圆角裁剪

虽然边框图像不会受 border-radius 影响， 但其他将绘制或事件处理裁剪到 边框、内边距或内容边缘的效果 必须裁剪到相应的曲线。 例如， 背景会裁剪到由 background-clip 指定的曲线， overflow 取除 visible 外的值时裁剪到曲线 内边距边缘 （当两个轴上的 overflow 都不是 visible 时）， 替换元素的内容裁剪到曲线 内容边缘， 指针事件裁剪到曲线 边框边缘 等。

注意： 由于 border-radius 会减小元素的交互区域， 作者应确保剩余的交互区域符合 目标平台的推荐最小值； 尤其是在使用 border-radius 时，想要符合推荐的最小触摸目标尺寸， 可能需要更大的宽高。

DIV {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em }

3.2. 颜色和样式过渡

颜色和样式的过渡必须包含在同时包含两个圆角半径及内曲线中心 的最小矩形交于边框的区域内 （该内曲线中心可能就是内边距边缘的顶点， 如果圆角半径小于边框宽度）。

若其中一个边框为零宽，则另一个边框填满整个过渡区。 否则， 邻接边之间颜色和样式过渡的中心是曲线上根据边框宽度比连续单调确定的某点， 但没有定义这种过渡视觉如何、 也未规定映射函数如何将比值映射到曲线点。

3.3. 曲线重叠

圆角曲线不得重叠： 当任意两相邻边的圆角半径之和 超过边框盒尺寸时， UA 必须按比例缩减 所有圆角半径的使用值， 直至它们不再重叠。 缩减半径的算法如下：

设 f = min(L_i/S_i), 其中 i ∈ {top, right, bottom, left}, S_i 是该边两角的半径之和， L_top = L_bottom = 盒子的宽度， L_left = L_right = 盒子的高度。 若 f < 1，则所有圆角半径都乘以 f 缩减。

注意： 该公式保证四分之一圆还是四分之一圆， 大半径总大于小半径， 但可能缩小了本已足够小的角， 可能导致本该视觉一致的相邻元素曲角看起来不同。

若曲线影响了如滚动条等 UI 元素时， UA 可进一步缩减受影响的圆角半径（且仅限受影响者）， 且缩减程度应以满足需要为限。

例如，下图中 A 边框可能是这样设置：

box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em

高度（2.5em）足以满足（0.5em+2em）的半径。 若高度仅为 2em，

box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em

所有圆角都需按 0.8 比例缩减以适应。 则实际使用半径为 0.4em（本应为 0.5em）和 1.6em（本应为 2em）。 见下图中的 B 边框。

3.4. 表格上的效果

border-radius 属性适用于 table、inline-table 和 table-cell 盒子， 前提是分隔边模式（border-collapse: separate）。 若 border-collapse 为 collapse，则无效。

3.5. 圆角尺寸：border-*-*-radius 属性

半径用<border-radius>值指定，其中：

<border-radius> = <slash-separated-border-radius-syntax> | <legacy-border-radius-syntax>
<slash-separated-border-radius-syntax> = <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?
<legacy-border-radius-syntax> = <length-percentage [0,∞]>{1,2}

border-*-radius 属性的两个<length-percentage>值 定义了 构成外边框边缘（见下图）圆角形状的四分之一椭圆的半径。 第一个为水平半径， 第二个为垂直半径。 若省略第二个则等于第一个。 若任一为零则角为直角非圆角。 百分比的水平半径参考边框盒宽， 垂直半径用高度。 负值无效。

注意：作者应优先用斜杠写法，新内容优先用， 但也支持传统语法（用空格分隔的两个值）以兼容旧内容。

DIV.standout {
    width: 13em;
    height: 8em;
    border: solid black 1em;
    border-radius: 7.5em 5em }

流向相关属性 border-start-start-radius、border-start-end-radius、border-end-start-radius 和 border-end-end-radius 对应物理属性 border-top-left-radius、border-bottom-left-radius、border-top-right-radius 和 border-bottom-right-radius。 具体映射取决于元素的 writing-mode、direction 和 text-orientation， 其中第一个 start/end 表示块轴侧， 第二个表示内联轴侧 （即模式为 'border-block-inline-radius'）。

3.6. 圆角尺寸简写：border-radius 以及 border-*-radius 简写属性

3.6.1. 设置单侧圆角尺寸： border-top-radius、border-right-radius、border-bottom-radius、border-left-radius、border-block-start-radius、border-block-end-radius、border-inline-start-radius、border-inline-end-radius 简写

这些 border-*-radius 简写会设置对应侧的两个 border-*-*-radius 长手属性。如果在斜杠前后都给出了值，则斜杠前的值设置水平半径，斜杠后的值设置垂直半径。 若没有斜杠，则这些值同时用于水平与垂直半径。 两个半径的值按以下顺序给出： 对于 border-top-radius 为 top-left, top-right； 对于 border-right-radius 为 top-right, bottom-right； 对于 border-bottom-radius 为 bottom-left, bottom-right； 对于 border-left-radius 为 top-left, bottom-left； 对于 border-block-start-radius 为 start-start, start-end； 对于 border-block-end-radius 为 end-start, end-end； 对于 border-inline-start-radius 为 start-start, end-start； 对于 border-inline-end-radius 为 start-end, end-end。 若省略第二个值，则复制第一个值。

3.6.2. 一次设置所有圆角： border-radius 简写

The border-radius 简写设置所有四个 border-*-radius 属性。 如果在斜杠前后都给出了值， 则斜杠前的值设置水平半径， 斜杠后的值设置垂直半径。 如果没有斜杠，则这些值在两个轴上等量地设置半径。 每个半径的四个值按顺序给出为 top-left、top-right、bottom-right、bottom-left。 如果省略 bottom-left，则与 top-right 相同。 如果省略 bottom-right，则与 top-left 相同。 如果省略 top-right，则与 top-left 相同。

border-radius: 4em;

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

border-radius: 2em 1em 4em / 0.5em 3em;

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

3.7. 圆角形状：corner-*-shape 属性

默认情况下，非零的 border-radius 值定义了一个四分之一椭圆的圆角形状，用于将受影响的角进行圆化， 填充由该角的 border-radius 定义的 圆角区域。 但在某些情况下，可能需要其他的 圆角形状。 corner-*-shape 属性（及其简写）精确地指定了一个盒子在由其 border-*-radius 值定义的区域内将使用的 圆角形状。

不同的 圆角形状 都可以作为 超椭圆（superellipse） 的不同参数来表达。 超椭圆是椭圆的推广，基于其 k 参数可以表达方形、椭圆和缺口之间的所有形状。

为允许完整表达及插值，corner-shape 属性可以直接使用 superellipse() 函数提供超椭圆参数，或使用提供的关键字之一，这些关键字表示常用参数。 详情见 <corner-shape-value> 定义。

The corner-*-*-shape 长手属性设置给定角的圆角形状。

流向相关的长手属性（corner-start-start-shape 等） 根据元素的 writing-mode、direction 和 text-orientation 映射到物理长手属性（如 corner-top-left-shape 等）。 第一个 start/end 表示块轴侧， 第二个表示内联轴侧 （即模式为 corner-block-inline-shape）。

<corner-shape-value> = round | scoop | bevel | notch | square | squircle |
                       <superellipse()>
superellipse() = superellipse(<number> | infinity | -infinity)

round

圆角形状为一个凸椭圆的四分之一。 相当于superellipse(1)。

注意: 这是corner-shape 属性的初始值，因为在 corner-shape 出现前，border-radius 的行为即如此。

squircle

该 圆角形状 是“squircle”的四分之一， 在 round 与 square 之间的一种凸曲线。 等价于 superellipse(2)。

square

该 圆角形状 是一个凸的 90 度角。 等价于 superellipse(infinity)。

注意： 这在外观上与使用 border-radius: 0 得到的“普通”方角相同， 但它可以与其他 corner-shape 值平滑地动画插值。

bevel

The corner shape is a straight diagonal line, neither convex nor concave. Equivalent to superellipse(0).

scoop

The corner shape is a concave quarter-ellipse. Equivalent to superellipse(-1).

notch

The corner shape is a concave 90deg angle. Equivalent to superellipse(-infinity).

superellipse(K)

该 圆角形状 是超椭圆的一部分。 参数 K 是 超椭圆参数， 它使用指数 2^K 定义超椭圆。

超椭圆的数学定义及不同 K 值的含义见 § 3.7 圆角形状 中的说明。 有关如何精确计算和渲染超椭圆，请参见 § 3.9.4 渲染 corner-shape。

注意： 如果未指定 border-radius（或设置为 0）， 则 圆角区域 也为零， corner-shape 不会产生任何效果。

corner-*-shape 不会改变 overflow 规则对 border-*-radius 的适用，除非它以不同方式塑造了角；元素仍按常规被形状化的边框裁剪。

由 corner-*-shape 指定的曲线定义了边框的外边缘。 边框的内边缘跟随外边缘的曲线（其形式不一定能用超椭圆表示）， 并且在绝大多数位置与外边缘保持近似一致的距离， （如果在角处会合的两条边的 border-width 不一致，则距离会线性增加）。

corner-*-shape 还影响 box-shadow 的渲染， 以及当从盒子扩展出的 overflow clip edge 被形状化时的表现，但这些并不直接沿着 corner-*-shape 路径（像内边缘那样）跟随。 相反，它们以轴对齐的方式缩放 corner-shape 路径。

3.8. 圆角形状简写：corner-shape 及 corner-*-shape 简写属性

3.8.1. 设置单侧两个角的形状： corner-*-shape 简写：

corner-*-shape 简写属性设置对应侧的两个 corner-*-*-shape 属性。 如果只给一个值， 第二个值与第一个相同。

物理简写属性（如 corner-top-shape 等）中， 值顺序为左/右或上/下，具体取决于该属性所在的主轴方向。 如 corner-top-shape: round square 相当于 corner-top-left-shape: round; corner-top-right-shape: square;

逻辑简写属性（如 corner-block-start-shape 等）中， 值顺序永远是另一轴的 start/end。 如 corner-block-start-shape: round square 相当于 corner-start-start-shape: round; corner-start-end-shape: square;

3.8.2. 一次设置所有角的形状： corner-shape 简写

corner-shape 属性指定盒子圆角区域（由 border-radius 指定）的四个角的形状。 四个值依次分别设置上、右、下、左角的形状。 缺少的左侧等于右侧，缺少的底部等于顶部，缺少的右侧也等于顶部。

3.9. 圆角尺寸与形状简写： corner 及 corner-* 简写属性

3.9.1. 设置单个角的尺寸与形状： corner-top-left、corner-top-right、corner-bottom-right、corner-bottom-left、corner-start-start、corner-start-end、corner-end-start、corner-end-end 简写

corner-*-* 简写属性设置对应侧的 corner-*-*-shape 和 border-*-*-radius 两个长手属性。 具体详细规则见 corner-*-*-shape 和 border-*-*-radius 相关属性。

3.9.2. 设置单侧全部角的尺寸与形状： corner-top、corner-right、corner-bottom、corner-left、corner-block-start、 corner-block-end、corner-inline-start、corner-inline-end 简写

corner-* 简写属性设置对应边的两个 corner-*-shape 长手属性 和两个 border-*-radius 长手属性。 详情见对应的 corner-*-shape 和 border-*-radius 属性。

3.9.3. 一次设置所有角尺寸与形状： corner 简写

corner 简写属性用于同时设置所有 corner-*-shape 及 border-*-radius 长手属性。

3.9.4. 渲染 corner-shape

在渲染带有形状圆角的元素时，元素的路径需要根据 border、outline、box-shadow、overflow-clip-margin 等因素进行偏移。

渲染边框或轮廓时，偏移与元素形状的曲线对齐； 而渲染 box-shadow 或处理 overflow-clip-margin 的偏移时，偏移是按轴对齐的。

一个 元素 element 的 外轮廓 是给定 element 和 element 的 border contour path 与 border edge。

一个 元素 element 的 内轮廓 是给定 element 和 element 的 border contour path 与 padding edge。

一个 元素 的 border 渲染在其 外轮廓 和 内轮廓 之间的区域内。

一个 元素 的 outline 随 外轮廓 一起按照 used outline-width 和 outline-offset 渲染， 其精确渲染方式由实现自行决定。

一个 元素 的 overflow 区域由其 内轮廓确定。 元素 的 overflow clip edge 由给定 element、element 的 border contour path、padding edge、element 的 used overflow-clip-margin 来确定。

元素 的每个 'box shadow' 阴影由 border contour path（以 element、border edge 和阴影 used box-shadow-spread）塑造。

3.9.5. 限制对角圆角半径

当存在凹形 corner-shape（superellipse 参数为负）时，对角的圆角可能互相重叠。

div {
  corner-shape: scoop;
  border-top-left-radius: 80%;
  border-bottom-right-radius: 80%;
}

为防止这种情况，会限制四个半径，避免重叠。 方法是为每对对角圆角计算一个包围多边形，并找到一个最大缩放因子，使应用后两个多边形不再相交。

3.9.6. 圆角形状插值

由于 <corner-shape-value> 总可用 superellipse() 并指定可变 superellipse 参数 表达，所以插值两个 <corner-shape-value> 可通过插值 superellipse 参数本身实现。 由于插值采用 log2，若线性插值，则凹角变化比凸角快得多。 为平衡此现象，superellipse 插值公式用来描述如何将 superellipse 参数归一化到 0~1 再反解：

要将 superellipse 参数 s 插值到 0-1，直接返回 归一化超椭圆半角(s)。

4. 边框图像

作者可以指定一张图片作为边框样式， 此时边框的外观来自 border-image-source 指定的图片的各侧和各个角， 这些图片片段会以多种方式切割、缩放、拉伸以适配 border image area 大小。 border-image 属性不会影响布局： 盒子及其内容和周围布局， 仅由 border-width 和 border-style 属性决定。

DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }

下面展示更复杂场景，演示 border image 如何与兜底 border-style 对应以及超出边框区域效果。 该 border image 图为波浪绿边，角有延展效果：

各 border 属性随后协作，平铺如下：

本例即使 border-width 为 12px， border-image-width 会算作 124px。 border image area 会比 border box 外扩 31px 到 margin area。 如果图片加载失败（或 UA 不支持 border image），fallback 用绿色双线边。

.notebox {
  border: double orange;
  /* 必须先设 border 简写，否则会抹掉 border-image */
  border-image: url("border.png") 30 round;
  /* 其它 border 属性可跟在后面 */
  border-width: thin thick;
}
...
.sidebar .notebox {
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
  border: none; /* 去掉所有边框 */
  /* border 简写会重置 border-image */
}

4.1. 图片来源：border-image-source 属性

指定图片作为边框， 用于替代由 border-style 指定的边框渲染。 若 fill 关键字也用于 border-image-slice，则该图片还会作为元素的附加背景。 若值为 none 或图片显示失败（或属性不适用），则回退到普通边框样式； 否则元素的 border-style 不渲染， 只显示此 边框图片， 具体表现见下文说明。

4.2. 图像切片：border-image-slice 属性

此属性指定从图像的上、右、下、左边缘向内的偏移，将图像分成九个区域：四个角、四条边和一个中间部分。 中间图像部分会被丢弃（视为完全透明），除非存在 fill 关键字。 （它会绘制在背景之上；见 绘制边框图像。）

如果只有一个分量值，则它适用于所有侧。 如果有两个值，则上下设为第一个值，左右设为第二个值。 如果有三个值，则上为第一个值，左右为第二个值，下为第三个值。 如果有四个值，则分别应用于上、右、下、左。

<percentage [0,∞]>

百分比相对于图像的尺寸：水平偏移相对于图像的宽度，垂直偏移相对于图像的高度。

<number [0,∞]>

数字表示图像中的像素（若图像为栅格图像）或向量坐标（若图像为矢量图像）。

fill

若存在 fill 关键字， 则导致保留边框图像的中间部分。 （默认情况下该部分被丢弃，即视为空。）

负值为无效。 计算值大于图像尺寸的情形被解释为 100%。

border-image-slice 值所给的区域可能会重叠。 但是如果左右宽度之和大于或等于图像的宽度，则用于顶部和底部边以及中间部分的图像为空——这与为这些部分指定了一个非空的透明图像效果相同。 对顶部和底部值亦然。

如果必须先对图像进行缩放以确定切片（例如，对于没有 natural dimensions 的 SVG 图像）， 则使用 默认缩放算法，不使用 指定尺寸，并将 border image area 作为 默认对象尺寸。

4.3. 绘制区域：border-image-width 属性

边框图像 绘制在称为 border image area 的区域内。 该区域的边界默认对应于 border box， 参见 border-image-outset。

border-image-width 的四个值指定用于将 border image area 分成九个 区域 的偏移量。 这些偏移量表示从该区域的上、右、下、左四侧向内的距离。

如果只有一个分量值，则它适用于所有侧。 如果有两个值，则上下设为第一个值，左右设为第二个值。 如果有三个值，则上为第一个值，左右为第二个值，下为第三个值。 如果有四个值，则分别应用于上、右、下、左。

值具有下列含义：

<length-percentage [0,∞]>

百分比参考 border image area 的尺寸：水平偏移参照区域宽度，垂直偏移参照区域高度。

<number [0,∞]>

数字表示对应计算后 border-width 的倍数。

auto

若指定了 auto， 则所用的 border-image-width 为对应图像切片的 natural 宽度或高度（以适用者为准，见 border-image-slice）。 如果图像没有所需的 natural dimension，则使用相应的计算后 border-width。

对于任何 border-image-width 值，负值为无效。

如果两侧相对的 border-image-width 偏移大到足以重叠， 则所有 border-image-width 偏移的 used values 会按比例缩减，直到它们不再重叠。 用数学表示： 设 L_width 为 border image area 的宽度，L_height 为其高度， 以及 W_side 为 side 侧的 border-image-width 偏移， 令 f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom)). 如果 f < 1， 则通过将所有 W 乘以 f 来缩减它们。

4.4. 边缘外延：border-image-outset 属性

这些值指定 border image area 超出 border box 的延伸量。

如果只有一个分量值，则它适用于所有侧。 如果有两个值，则上下设为第一个值，左右设为第二个值。 如果有三个值，则上为第一个值，左右为第二个值，下为第三个值。 如果有四个值，则分别应用于上、右、下、左。

<length [0,∞]>

表示指定长度的外延。

<number [0,∞]>

表示对应计算后 border-width 的倍数作为外延。

负值为无效。

渲染在 border box 外部的边框图像部分被视为 ink overflow，不会触发滚动。 此外，这些部分对鼠标事件是不可见的，不会代表元素捕获这些事件。

注意： 尽管它们不会触发滚动机制，外延图像仍可能被祖先元素或视口裁剪。

4.5. 图像平铺：border-image-repeat 属性

此属性指定用于边框图像的侧边和中间部分的缩放与平铺方式。 第一个关键字用于顶部、中部和底部部分的水平缩放与平铺， 第二个用于左部、中部和右部部分的垂直缩放与平铺； 见 绘制边框图像。 如果缺少第二个关键字，则假定其与第一个相同。 各值含义如下：

stretch

图像被拉伸以填充其对应的 区域。

repeat

图像被平铺（重复）以填充其对应的 区域。

round

图像被平铺（重复）以填充其对应的 区域。 如果不能用整数个图块填满区域，则会对图像进行重缩放以满足整数个图块。

space

图像被平铺（重复）以填充其对应的 区域。 如果不能用整数个图块填满区域，则多余的空间会在图块周围进行分配。

关于如何对 border-image 各部分进行精确的缩放与平铺，见下文详细过程。

4.6. 绘制边框图像

当 border image 由 border-image-source 给出，且被 border-image-slice 切分后， 得到的九块图像会按如下四步缩放、定位、平铺到其对应的 border image regions 中：

1. 按 border-image-width 缩放。
   • 上、下边的两块图像，被分别缩放为其各自 border image 区域 的高度，宽度同比例缩放。
   • 左、右边的图像，被分别缩放为其各自 border image 区域 的宽度，高度同比例缩放。
   • 四个角的图像被缩放到与其对应 border image 区域 等宽等高。
   • 中间图像的宽度以顶部图像同样的缩放系数缩放，若此因子为 0 或无穷，则用底部的缩放因子，仍无效则不缩放。高度则用左边图像的系数，若为 0 或无穷，则用右边的，仍无效则不缩放。
2. 按 border-image-repeat 缩放。
   • 若第一个关键字为 stretch， 则顶部、中部、底部三块图像会再次缩放以匹配 border image area 的中区域宽度，高度不再变化。
   • 若第一个关键字为 round， 顶部、中部、底部图像宽度调整，刚好能完整贴合 border image area 的中区域， 与 round 在 background-repeat 属性一致。
   • 若第一个关键字为 repeat 或 space， 则顶部、中部、底部图像不再继续缩放。
   • 第二个关键字的 stretch、round、repeat 和 space 效果类似，作用于左、中、右三个图像的高度。
3. 定位第一块图。
   • 若第一个关键字为 repeat， 顶部、中部、底部图像会在各自区域水平居中，否则贴齐其 border image area 区域左侧。
   • 若第二个关键字为 repeat， 左、中、右图像会在各自区域垂直居中，否则贴齐 border image area 顶侧。
4. 平铺并绘制。
   • 图像随后平铺，填充各自区域。
   • 如为 space， 则局部未能放满的瓷砖会被丢弃，多余空白会均分到首、末、以及各块之间。这样可能造成边框侧边区域为空。
   • 这些图像的层级与普通 border 相同：在背景层前渲染。
   • 中间图像不会绘制，除非 fill 已用于 border-image-source。

4.7. 边框图像简写：border-image 属性

这是一个用于同时设置 border-image-source、 border-image-slice、border-image-width、border-image-outset、 以及 border-image-repeat 的缩写属性。 省略的值将设置为各自的 初始值。

4.8. 对表格的影响

border-image 属性适用于 border-collapse 为 collapse 时的表格和内联表格边框。 但本规范未定义此类图片边框的渲染方法。 特别地，没有定义图片边框与表格单元格、行及行组边界的边框如何交互 （参见边框冲突解决， 见 [CSS2]）。

预计未来规范会定义渲染方案。 建议在此之前，UA 不要对设置为 collapsed borders 的表格应用 border image。

5. 局部边框

传统 CSS 边框会覆盖整个边框边。 但有时隐藏部分边框会很有用。

这里有两个提案： 第二个来自 GCPM，第一个是为便于阅读而重写。 命名很糟糕，存在问题，欢迎新的提案。 把它当作裁剪会有问题： 如果有 dotted 边框，希望始终显示完整的点，而不是点的一部分。 所以应该是绘制限制而不是裁剪。

5.1. 局部边框：border-limit 属性

默认情况下绘制整个边框。但可以通过该属性只绘制部分边框。关键字指定作用部位，长度或百分比指定范围。

all

绘制整个边框。

sides

只绘制边（不包括角区，角区由 border radius 定义）。长度或百分比从每条边的中点计：50% 仅画边的中间 50%；默认整条边都会绘制。

corners

只绘制角区（可指定向边延伸的距离）。长度从角区最近边界计，百分比从边框 box 的绝对角计。

left

right

对左、右（竖直）边，画整条边和角区。对上、下（水平）边，按指定范围绘制左右段。距离计算等同于 corners。

top

bottom

对上、下（水平）边，画整条边和角区。对左、右（竖直）边，按指定范围绘制上/下部分。距离计算等同于 corners。

div {
  border: solid;
  border-limit: sides 50%;
}

div {
  border: solid;
  border-radius: 1em 2em;
  border-limit: corners;
}

div {
  border-top: solid;
  border-limit: left 4em;
}

div {
  border: solid;
  border-limit: corners 10px;
}

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 5px;
}

div {
  border: solid;
  border-radius: 5px;
  border-limit: corners 30%;
}

5.2. border-clip 属性

这些属性会将各自的边框沿边拆分为若干段。第一段可见，第二段不可见，第三段可见，依此类推。各段长度可用绝对/百分比/弹性长度（fr 单位，如 [CSS3GRID]）指定。 none 表示该边框不拆分，正常显示。

流向相关 长手（border-block-start-clip 等） 会根据元素的 writing-mode、 direction 和 text-orientation 对应到物理长手（如 border-top-clip 等）。

这两个简写属性分别设置 border-block-start-clip、border-block-end-clip 和 border-inline-start-clip、border-inline-end-clip。

border-clip 是一组长手属性的简写属性，可将四条边同时设为相同值。

如指定的分段长度小于边框长度，则剩余部分按指定弹性长度比例分配。若没有弹性长度，则等同在末尾加 1fr。

如所有指定分段大于边框长度，则按顺序绘制，剩余弹性段长为 0。

水平边框分段顺序为左到右，竖直边为上到下。

实际边框分段顺序为：先全部弹性段设为零，逐步排布指定分段，剩余长度再按弹性比例分配。

border-clip: 10px 1fr 10px;

border-top-clip: 10px 1fr 10px;
border-bottom-clip: 10px 1fr 10px;
border-right-clip: 5px 1fr 5px;
border-left-clip: 5px 1fr 5px;

border-top-clip: 0 10px 1fr 10px;
border-bottom-clip: 0 10px 1fr 10px;
border-right-clip: 0 5px 1fr 5px;
border-left-clip: 0 5px 1fr 5px;

border: thin solid black;
border-clip: 0 1fr; /* hide borders */
border-top-clip: 10px 1fr 10px; /* make certain borders visible */
border-bottom-clip: 10px 1fr 10px;

border-top: thin solid black;
border-bottom: thin solid black;
border-top-clip: 10px;
border-bottom-clip: 10px;

border-top: thin solid black;
border-clip: 10px;

A sentence consists of words¹.

¹ Most often.

@footnote {
  border-top: thin solid black;
  border-clip: 4em;
}

border: 4px solid black;
border-top-clip: 40px 20px 0 1fr 20px 20px 0 1fr 40px;

border: 4px solid black;
border-top-clip: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;

6. 投影阴影

6.1. 投影阴影着色：box-shadow-color 属性

box-shadow-color 属性定义一个或多个投影阴影颜色。 此属性接受逗号分隔的阴影颜色列表。

关于 “层叠、布局及其它细节” 中 box-shadow-color 如何与其它逗号分隔投影阴影属性组合形成每层阴影， 请参阅该节。

6.2. 投影阴影位移：box-shadow-offset 属性

box-shadow-offset 属性定义一个或多个投影阴影的位移。 此属性接受逗号分隔列表。 每项可以为 none（无阴影）， 或一对 <length>， 代表水平和垂直位移， 或单一 <length> （两方向都用该值）。

none

阴影不渲染。 对应此阴影的其它 box shadow 属性值无效。

第1个<length>

指定阴影的水平位移。正值右移，负值左移。

只写一个<length>，则水平和垂直均此值。

第2个<length>

指定阴影的垂直位移。正值向下，负值向上。

关于 “层叠、布局及其它细节” 中 box-shadow-offset 如何与其它逗号分隔投影阴影属性组合形成每层阴影， 请参阅该节。

6.3. 阴影模糊：box-shadow-blur 属性

box-shadow-blur 属性定义一个或多个阴影模糊半径。 该属性接受逗号分隔的<length>值列表。

负值无效。 如果模糊值为0，阴影边缘锐利。 否则，值越大，阴影边缘越模糊。 参见下文阴影模糊。

参见 “层叠、布局及其它细节”，了解 box-shadow-blur 如何与其它逗号分隔的阴影属性共同组成每一层阴影。

6.4. 阴影扩展：box-shadow-spread 属性

box-shadow-spread 属性定义一个或多个阴影扩展距离。 该属性接受逗号分隔的<length>值列表。

正值使阴影向各方向扩展指定半径，负值则阴影收缩。详见下文阴影形状。

注意：对内阴影而言，扩展阴影（产生更多阴影区）意味着阴影边界会收缩。

参见 “层叠、布局及其它细节”，了解 box-shadow-spread 如何与其它逗号分隔的阴影属性共同组成每一层阴影。

6.5. 阴影类型：box-shadow-position 属性

box-shadow-position 属性定义一个或多个投影阴影的位置类型。 该属性接受逗号分隔的 outset 和 inset 关键字列表。

outset

使阴影成为外阴影（outer box-shadow）。 即，盒模型投射在画布上，效果像是盒子悬浮在画布之上。

inset

使阴影成为内阴影（inner box-shadow）。 即，画布“投影”到盒子内，就像盒子被从画布中挖空并推到背后。

参见 “层叠、布局及其它细节”，了解 box-shadow-position 如何与其它逗号分隔的阴影属性共同组成每一层阴影。

6.6. 投影阴影简写：box-shadow 属性

box-shadow 属性为盒子添加一个或多个投影阴影。 该属性接受以逗号分隔的阴影列表，前面的阴影位于上层，后面的阴影在下层。

每个阴影以 <spread-shadow> 的形式给出， 描述由两个 box-shadow-offset 指定的 <length> 值，以及可选的 box-shadow-blur、box-shadow-spread、box-shadow-color 和 box-shadow-position。省略的长度默认为 0； 省略的颜色在指定偏移值为 none 时默认为透明， 否则默认为 currentcolor。

注意: 为避免解析不同 <length> 值的歧义， 必须以两个 <length> 值指定偏移， 不同于 box-shadow-offset 属性， 后者可只用一个 <length> 值同时指定两个偏移量。

<spread-shadow> = <'box-shadow-color'>? && [ [ none | <length>{2} ] [ <'box-shadow-blur'> <'box-shadow-spread'>? ]? ] && <'box-shadow-position'>?

下例展示了 spread 与 blur 对阴影的效果：

width: 100px; height: 100px;
border: 12px solid blue; background-color: orange;
border-top-left-radius: 60px 90px;
border-bottom-right-radius: 60px 90px;
box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;

6.6.1. 阴影形状、扩展与击穿

外部 box-shadow 投影阴影时，表现为该元素的 border-box 是不透明的。假设扩展距离为零，则其周长与 border box 完全一致。阴影只绘制在边框外，被裁剪在元素的 border-box 内部。

内部 box-shadow 投影阴影时，表现为 padding 边界外的所有内容是不透明的。假设扩展距离为零，其周长与 padding box 完全一致。阴影只绘制在 padding 边缘内，被裁剪在元素的 padding box 外部。

如果定义了扩展距离，上述的阴影轮廓将被向外扩张（对于外部阴影），或向内收缩（对于内部阴影），分别通过增加（内阴影为减少）阴影直边的 扩展距离（并将结果宽度/高度向下取整到零）。

下面是一些为橙色盒子添加蓝色边框和投影阴影的示例。

border:5px solid blue; background-color:orange; width: 144px; height: 144px;	border-radius: 20px;	border-radius: 0;
box-shadow: rgba(0,0,0,0.4) 10px 10px;
box-shadow: rgba(0,0,0,0.4) 10px 10px inset
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* spread */ inset

为了在应用扩展时保持盒子外形，阴影的圆角半径也会随之增加（内阴影为减小），即将 border-box（或 padding-box）半径加上（或减去）扩展距离（并向下取整到零）。对于外部阴影，圆角半径会在每个方向上分别进行调整，以保持圆角的锐利程度。

border-image 不会影响 box-shadow 的形状。

6.6.2. 阴影边缘模糊

非零的模糊半径表示阴影结果应进行模糊处理，比如通过高斯滤波。具体算法未明确定义；但实际阴影图像必须近似（每个像素值误差不超过 5%）于对阴影应用标准差为模糊半径一半的高斯模糊所得的图像。

注意: 这意味着，对一条长直阴影边缘，模糊半径将在垂直并居中于阴影边缘的方向上产生明显的颜色渐变，渐变宽度大约为模糊半径的两倍，区间由阴影内侧端点接近完全不透明，到阴影外侧端点几乎完全透明。

6.7. 层叠、布局及其他细节

投影阴影通过 box-shadow-* 属性构建的协调值列表声明，协调值属性组以 box-shadow-offset 作为基准属性。参见 CSS Values 4 §A Coordinating List-Valued Properties。

阴影效果由上到下依次叠加：第一个阴影在最上层，后续阴影层叠在下方。阴影不影响布局，且可能与其他盒子、文字或它们各自的阴影重叠。在堆叠顺序和绘制顺序上，元素的外部阴影绘制于元素背景之下，内部阴影则绘制于元素背景之上（在边框和边框图片之下，如果有的话）。

除非另有规定，投影阴影仅作用于主盒子。当受影响盒子有多个分片时，阴影的应用方式参见 box-decoration-break。

阴影不会触发滚动，也不会增加可滚动区域的大小。

在边框折叠模型中，外部阴影对表格内部元素无效。如果单个边在折叠模型下定义了阴影但有多种边框厚度（如表格某行的边框比其他行粗，或跨行单元格邻接不同边框厚度单元格上的内阴影），其阴影的具体位置和渲染结果未定义。

7. 边框形状

虽然 corner-shape 和 border-radius 使边框样式更具表现力，但仍假设边框为矩形。

border-shape 属性扩充了这些能力，使作者可用任意基础形状指定边框路径。

7.1. border-shape 属性

border-shape 属性可以指定一个 <basic-shape> 或两个 <basic-shape>，分别对应一条或两条路径。

如果有两个 <basic-shape>，边框呈现为这两条路径之间的区域。仅有一个 <basic-shape> 时，边框以 相关边的计算边框宽度为描边宽度。

边框填充色为相关边的计算border-color。

未指定 <geometry-box> 时，百分比计算方式依所给 <basic-shape> 数量而异。

如给出两个 <basic-shape>，第一个（外）默认为 border box，第二个（内）默认为 padding box。这样可通过不同的 border-width 属性影响最终形状。

给定单个 <basic-shape> 时，<geometry-box> 默认为 half-border-box，使描边效果与默认边框一致。

border-shape 属性与 border-radius、corner-shape 不兼容。当元素 border-shape 的计算值不是 none 时，border-radius 被视作 0，corner-shape 也被忽略。

外部 box-shadow 遵循外层路径，内部 box-shadow 遵循内层路径。两者都以 spread * 2 为描边宽度，并被边框形状裁剪。

border-shape 不影响盒子的几何和布局，这仍由 border-width 属性计算。

border-shape 不影响盒子内内容流。注意：可以和 shape-inside 联用，实现盒子装饰与排版共同控制。

inner border-shape 会像 border-radius 一样裁剪元素的 overflow 内容，详见 corner clipping。

这应如何影响替换元素的裁剪？

隐私注意事项

本规范中未报告新的隐私注意事项。

安全注意事项

本规范中未报告新的安全注意事项。

变更

自 2025 年 7 月 22 日第一份公开工作草案以来的变更

• 添加了 corner-* 简写

• 将 corners 重命名为 corner

• 新增 Web Platform Tests 覆盖

• 并入与边框和阴影相关的完整 [CSS3BG] 文本

• 将 border-clip-* 属性重命名为 border-*-clip 并添加逻辑长手与简写

• 将 border-*-clip 属性的 normal 值重命名为 none

• 为 border-*-*-radius 长手添加使用斜杠分隔水平和垂直半径的新语法

• 允许为 <length> 的单一值用于 box-shadow-offset 来同时设置两个偏移值

自 [CSS3BG] 以来的新增内容

• <image-1D> 作为 border-color 及其长手的值

• 添加了物理与逻辑的 border-*-radius 简写

• 添加了 corner-shape 与 corner-*-shape 简写，以及相关的 corner 与 corner-* 简写

• 添加了 border-shape

• 通过 border-limit 与 border-*-clip 属性 添加了 局部边框

• 添加了 box-shadow-* 长手并将 box-shadow 变为简写

• 将逻辑边框属性从 [CSS-LOGICAL-1] 移至本规范。

致谢

除了对本模块前身 [CSS1]、[CSS2] 和 [CSS3BG] 的众多贡献者外， 编辑们还要感谢 Tab Atkins、Noam Rosenthal、Håkon Wium Lie、Oriol Brufau 和 Guillaume Lebas 对本 Level 4 提出的建议和反馈。