CSS 背景与边框模块 第 3 级

1. 介绍

本小节不具有规范性。

当元素按照 CSS 盒模型 [CSS-BOX-3] 渲染时， 每个元素要么完全不显示， 要么以一个或多个矩形框的形式格式化。 每个框都有一个矩形的 内容区域， 内容周围有一圈 内边距， 内边距外有 边框， 边框外还有 外边距。 （外边距可能是负值， 但外边距不会影响背景和边框。）

此模块的属性处理 边框区域 的装饰 以及 内容、内边距 和 边框 区域的背景。 此外，盒子还可以使用 box-shadow 属性添加“投影”效果。

如果一个元素被分割成多个 盒子碎片，box-decoration-break [CSS-BREAK-3] 定义了 边框和背景如何在各个碎片上进行划分。 （如果元素在一行末尾、列末尾或页面末尾被分割， 并在下一行、下一列或下一页面中继续时，可能会产生多个碎片。）

本模块给出了背景、边框和投影的相对堆叠顺序。 要了解这些层与其他渲染内容的交互方式， 请参阅 [CSS2] 附录 E “堆叠上下文的详细说明”。

1.1. 模块交互

本模块取代并扩展了 [CSS2] 第 8.5 和 14.2 节中定义的背景和边框功能。

本模块中的所有属性适用于 ::first-letter 伪元素。 背景属性 和 border-radius 属性 也适用于 ::first-line 伪元素。 用户代理可以（但不要求） 将 border-image 或 box-shadow 属性应用于 ::first-line。 用户代理不得 将 border-color/style/width 属性 应用于 ::first-line。[CSS2]

1.2. 值定义

本规范遵循 CSS 属性定义约定， 使用 值定义语法，参考 [CSS-VALUES-3]。 本规范中未定义的值类型将在 CSS 值与单位中定义。[CSS-VALUES-3]。 与其他 CSS 模块结合可能会扩展这些值类型的定义。 例如，结合 CSS 图像 允许使用 CSS 渐变作为 background-image 或 border-image 的值。[CSS-IMAGES-3]

除了各属性定义中列出的特定值之外， 本规范中定义的所有属性 也接受 CSS 通用关键词 作为属性值。 为了可读性，这些内容没有被重复列出。

2. 背景

每个盒子都有一个背景层，它可能是完全透明的（默认）， 或填充为某种颜色和/或一个或多个图像。 背景属性指定使用什么颜色（background-color） 和图像（background-image）， 以及它们的大小、位置、平铺方式等。

背景属性不是继承的， 但父盒子的背景默认会透过子元素显示， 这是由于 transparent 的初始值设置在 background-color 上。

2.1. 层叠多个背景图片

一个盒子的背景可以有多个 背景图片层。 层的数量由 background-image 属性中逗号分隔的值数量决定。 注意，值为 none 仍然会创建一层。

每个 背景图像 都根据其他背景属性中的相应值进行调整大小、定位和平铺。 列表从第一个值开始匹配： 多余的值将不会使用。 如果某个属性没有足够的逗号分隔值与层的数量匹配， UA 必须通过重复值列表来计算其 使用值 直到足够为止。

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

列表中的第一个图像是最靠近用户的 层， 第二个图像绘制在第一个图像之后，以此类推。 如果存在背景颜色， 它会绘制在所有其他 层 之下。

注意： border-image 属性 也可以定义一个背景图片， 如果存在，它会绘制在 背景属性创建的 层 之上。

2.2. 基本颜色：background-color 属性

该属性设置盒子的 背景颜色。 该颜色绘制在任何背景图像之后。

h1 { background-color: #F00 } /* 将背景设置为红色。 */

背景颜色 会根据底层 background-clip 值进行裁剪 与底层的 背景图像层 关联。

2.3. 图像来源：background-image 属性

此属性指定元素的 背景图像。 图像按照指定的顺序绘制，第一个图像在最上层（最接近用户）， 后续图像依次在前一个图像的后面。 该属性的值是以逗号分隔的 <bg-image> 值的列表，其中

<bg-image> = <image> | none

值为 none 仍然算作一个 背景图像层，但不会绘制任何内容。 一个空的图像（宽度或高度为零）， 下载失败的图像， 或无法显示的图像 （例如，因为它不是支持的图像格式） 同样算作一个 层，但不会绘制任何内容。

请参阅 § 2.1 层叠多个背景图像，了解 background-image 如何与其他以逗号分隔的背景属性交互， 以形成每个 背景图像层。

设置背景图像时， 作者还应指定一个 background-color， 以在图像不可用时保持与文本的对比度。

出于可访问性原因， 作者不应使用背景图像 作为传达重要信息的唯一方式。 请参阅 Web 内容可访问性指南 F3 [WCAG20]。 图像在非图形化展示中不可访问， 尤其是背景图像 可能在高对比度显示模式中被关闭。

注意： 通过 content 属性， 可以在 CSS 中提供样式化的前景图像。 语义上重要的前景图像应在文档标记中提供，例如在 HTML 中使用 <img> 标签。

注意： 可以使用 媒体片段 来显示图像的某一部分。 CSS 图像 模块 将提供图像格式的回退语法 并包括额外的图像显示控制。

html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

实现可能通过不下载和绘制不可见的图像来优化 （例如，因为它们被其他完全不透明的图像遮挡）。

2.4. 平铺图像：background-repeat 属性

此属性指定 背景图像 在 调整大小 和 定位 后如何平铺。 该属性的值是以逗号分隔的 <repeat-style> 值的列表，其中

<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

单个 <repeat-style> 值有以下含义：

repeat-x

计算为 repeat no-repeat。

repeat-y

计算为 no-repeat repeat。

repeat

计算为 repeat repeat。

space

计算为 space space

round

计算为 round round

no-repeat

计算为 no-repeat no-repeat

如果 <repeat-style> 值有两个关键字， 第一个适用于水平轴， 第二个适用于垂直轴， 如下所示：

repeat

图像 会在此方向上重复， 以覆盖 背景绘制区域。

space

图像 会在 背景定位区域 内尽可能多地重复，而不会被裁剪， 然后图像会被拉伸以填满区域。 第一个和最后一个图像会接触到区域的边缘。 如果 背景绘制区域 大于 背景定位区域， 那么图案会重复填充整个背景绘制区域。 该方向的 background-position 值会被忽略， 除非没有足够的空间 来放置两个图像， 在这种情况下，只会放置一个图像， 而 background-position 决定其在此方向上的位置。

round

图像 会在 背景定位区域 内尽可能多地重复。如果它不能正好重复整数次，它会被缩放以适应。 请参见 background-size 下的公式。如果 背景绘制区域 大于背景定位区域， 那么图案会重复填充整个背景绘制区域。

no-repeat

图像 在该方向上只放置一次，并且不会重复。

除非两个关键字之一为 no-repeat， 否则整个 背景绘制区域 将被平铺， 即不仅仅是一条垂直条带和一条水平条带。

body {
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

body {
  background-image: url(dot.png) white;
  background-repeat: space
}

请参见 § 2.1 层叠多个背景图像 了解 background-repeat 如何与其他逗号分隔的背景属性交互， 以形成每个 背景图像层。

2.5. 固定图像：background-attachment 属性

如果指定了 背景图像， 该属性指定它们是否相对于 视口 固定（fixed） 或者随着盒子（scroll） 或其内容（local）滚动。 该属性的值是以逗号分隔的 <attachment> 关键字列表，其中

<attachment> = scroll | fixed | local

fixed

背景相对于视口固定。 在 分页媒体 中没有视口的情况下， fixed 背景相对于 页面盒子 固定，因此会在每一页上重复。

注意： 每个视图只有一个视口。 即使一个盒子是 滚动容器， 一个 fixed 背景不会随着盒子移动。

local

背景相对于盒子的内容固定： 如果盒子有滚动机制， 背景随着盒子内容滚动， 且 背景绘制区域 和 背景定位区域 相对于盒子的 可滚动溢出区域 进行定位， 而不是相对于其边框。 因为 可滚动溢出区域 不包括 边框区域， 对于 滚动容器，border-box 值的 background-clip 可以被视为与 padding-box 相同。

scroll

背景相对于盒子本身固定， 不会随内容滚动。 （它实际上附加在盒子的边框上。）

即使图像是固定的， 它仍然只有在位于盒子的 背景绘制区域 或未被裁剪时可见。 （请参见 § 2.11 特殊元素的背景 了解背景图像未被裁剪的情况。） 因此，除非图像是平铺的，否则它可能不可见。

body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

注意： 不支持 fixed 背景的用户代理 （例如，由于硬件平台的限制）将忽略 带有 fixed 关键字的声明。 例如：

body {
  /* 适用于所有用户代理: */
  background: white url(paper.png) scroll;
  /* 适用于支持固定背景的用户代理: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 适用于所有用户代理: */
  background: silver;
  /* 适用于支持固定背景的用户代理: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

请参见 § 2.1 层叠多个背景图像 了解 background-attachment 如何与其他逗号分隔的背景属性交互， 以形成每个 背景图像层。

2.6. 定位图像：background-position 属性

如果指定了 背景图像， 该属性指定它们在其对应的 背景定位区域 中的初始位置 （在任何 调整大小 之后）。

该属性的值是以逗号分隔的 <bg-position> 值列表，其中

<bg-position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right <length-percentage> ]
  [ top | center | bottom <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]
]

如果只指定了一个值， 则假定第二个值为 center。 如果给出了两个值， 第一个值是 <length-percentage>，表示水平位置（或偏移）， 第二个值是 <length-percentage>，表示垂直位置（或偏移）。 <length-percentage> 值表示 背景图像左上角相对于 背景定位区域 左上角的偏移量。

注意： 一对关键字可以重新排序， 但关键字和长度或百分比的组合不能。 因此 center left 是有效的，而 50% left 是无效的。

如果给出三个或四个值， 那么每个 <length-percentage> 表示一个偏移量， 并且必须由关键字引导，关键字指定偏移量是从哪个边缘给出的。 例如，background-position: bottom 10px right 20px 表示 从底边向上偏移 10px， 从右边向左偏移 20px。 如果给出三个值， 则假定缺失的偏移量为零。

正值表示相对于 背景定位区域 的边缘向内的偏移量， 负值表示相对于 背景定位区域 的边缘向外的偏移量。

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

<percentage>

水平偏移的百分比相对于 (背景定位区域 的宽度 - 背景图像 的宽度)。 垂直偏移的百分比相对于 (背景定位区域 的高度 - 背景图像 的高度)， 图像的大小由 background-size 给出。

例如，值对为 0% 0% 时， 图像的左上角与 通常为盒子的 内边距边缘 的左上角对齐。 值对为 100% 100% 时， 图像的右下角 位于区域的右下角。 值对为 75% 50% 时， 图像的 75% 横向位置和 50% 纵向位置 被放置在区域的 75% 横向和 50% 纵向位置上。

<length>

长度值表示一个固定的偏移量。 例如，值对为 2cm 1cm 时， 图像的左上角被放置在 从 背景定位区域 左上角 向右 2cm 和向下 1cm 的位置。

top

如果给出一个或两个值，计算为 0%，否则指定上边缘作为下一个偏移的起点。

right

如果给出一个或两个值，计算为 100% 的水平位置，否则指定右边缘作为下一个偏移的起点。

bottom

如果给出一个或两个值，计算为 100% 的垂直位置，否则指定下边缘作为下一个偏移的起点。

left

如果给出一个或两个值，计算为 0% 的水平位置，否则指定左边缘作为下一个偏移的起点。

center

如果未指定水平位置，计算为 50%（left 50%）； 如果未指定垂直位置，计算为 50%（top 50%）。

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

background-position: right 3em bottom 10px

请参见 § 2.1 层叠多个背景图像 了解 background-position 如何与其他逗号分隔的背景属性交互， 以形成每个 背景图像层。

2.6.1. 序列化 background-position 值

指定值和 计算值的 <bg-position> 类型 的序列化过程与 [CSS-VALUES-4] 中 <position> 的定义完全一致。 对于 3 值结构 （在 <position> 中无效）， 指定值 序列化 与等效的 4 值语法相同， 唯一不同的是省略的偏移值保持省略。

2.7. 绘制区域：background-clip 属性

确定 背景绘制区域， 即背景的绘制范围。 值具有以下含义：

border-box

背景在 边框盒 内绘制（剪裁）。

padding-box

背景在 内边距盒 内绘制（剪裁）。

content-box

背景在 内容盒 内绘制（剪裁）。

注意： 根元素有不同的 背景绘制区域， 因此在根元素上指定 background-clip 属性无效。 请参见 § 2.11 特殊元素的背景。

注意： 背景始终绘制在边框之后（如果有边框）。 请参阅 [CSS2] 附录 E 中的 “上下文堆叠的详细说明”。

请参阅 § 4.2 角形状 了解 border-radius 如何影响 背景绘制区域 的形状。

请参阅 § 2.1 层叠多个背景图像 了解 background-clip 如何与其他逗号分隔的背景属性交互， 以形成每个 背景图像层。

2.8. 定位区域：background-origin 属性

此属性决定 背景定位区域： 即定位任何背景图像的区域。 对于呈现为多个 盒片段的元素 （例如，多行内联框或多页框）， 指定哪些框由 box-decoration-break [CSS-BREAK-3] 作用 来确定背景定位区域。

padding-box

定位相对于 内边距盒。 （对于单个框，0 0 是内边距边缘的左上角，100% 100% 是右下角。）

border-box

定位相对于 边框盒。

content-box

定位相对于 内容盒。

如果该 background-attachment 值 为 fixed， 则该属性无效： 在这种情况下，背景定位区域为 初始包含块。

注意： 如果 background-clip 为 padding-box，background-origin 为 border-box，background-position 为 左上角 （初始值）， 且元素具有非零边框， 则 背景图像的上边缘和左边缘将被剪裁。

请参阅 § 2.1 层叠多个背景图像 了解 background-origin 如何与其他逗号分隔的背景属性交互， 以形成每个 背景图像层。

2.9. 调整图像大小：background-size 属性

此属性指定每个 背景图像的大小。 属性的值是以逗号分隔的 <bg-size> 值的列表，其中

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

值的含义如下：

contain

在保持其 自然宽高比（如有）不变的情况下缩放图像， 使其宽度和高度均可以适应 背景定位区域。

cover

在保持其 自然宽高比（如有）不变的情况下缩放图像， 使其宽度和高度均能完全覆盖 背景定位区域。

[ <length-percentage> | auto ]{1,2}

第一个值指定相应图像的宽度， 第二个值指定其高度。 如果只给出一个值， 则假定第二个值为 auto。

一个 <percentage> 相对于 背景定位区域。

一个 auto 值在一个维度上 通过使用图像的 自然宽高比 以及另一个维度的大小来解析， 或者如果失败，则使用图像的 自然尺寸， 如果这也失败，则将其视为 100%。

如果两个值都是 auto， 则应使用图像的 自然宽度 和/或 高度 （如有）， 缺少的维度（如果有）如上所述行为为 auto。 如果图像既没有 自然大小， 则其大小的确定方式与 contain 相同。

负值无效。

div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box }

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box }

p {
  background-size: 15px 15px;
  background-image: url(tile.png)}

body {
background-size: auto;            /* 默认值 */
background-image: url(flower.png) }

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30% }

如果 background-repeat 为 round 在一个 （或两个）维度上， 则需要第二步。 用户代理必须在该维度（或两个维度）上缩放图像， 使其在 背景定位区域内恰好适应整倍数次。 在宽度的情况下（高度类似）：

如果 X ≠ 0 是第一步后的图像宽度 而 W 是背景定位区域的宽度， 则舍入后的宽度 X' = W / round(W / X) 其中 round() 是返回最接近的自然数 （大于零的整数）的函数。

如果 background-repeat 在一个维度上仅为 round 且 background-size 在另一个维度上为 auto， 则有第三步： 另一个维度会缩放，以恢复原始宽高比。

div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* 默认 */
  background-size: auto }            /* 默认 */

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* 默认 */
  background-size: 3em }             /* = '3em auto' */

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto }

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto }

div {
  background-image: url(image5.png);
  background-repeat: round;
  background-size: auto 4em }

如果背景图像的宽度或高度解析为零， 则导致图像不显示。 （效果与它是透明图像相同。）

请参阅 § 2.1 层叠多个背景图像 了解 background-size 如何与其他逗号分隔的背景属性交互， 以形成每个 背景图像层。

2.10. 背景简写：background 属性

background 属性是一个 简写属性，用于在样式表中同一位置设置大多数背景属性。 逗号分隔的项的数量定义了背景图像层的数量。 给定一个有效的声明，对于每一层， 简写首先设置每个 background-image、background-position、background-size、background-repeat、background-origin、background-clip 和 background-attachment的相应值为该属性的初始值， 然后为该层指定任何声明中的显式值。 最后，background-color 被设置为指定的颜色（如果有）， 否则设置为其初始值。

此属性的值是以逗号分隔的 值列表，其中

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <visual-box> || <visual-box> || <'background-color'>

注意: <final-bg-layer> 中允许颜色，但在 <bg-layer> 中不允许。

如果一个 <visual-box> 值存在， 则它同时设置 background-origin 和 background-clip。 如果存在两个值， 则第一个设置 background-origin， 第二个设置 background-clip。

body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }

body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em auto;
    background-repeat: round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }

E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

2.11. 特殊元素的背景

文档的画布是文档渲染的无限表面。[CSS2] 由于没有元素对应画布， 为了允许对画布进行样式设置， CSS 会传播 根元素（或在 HTML 中为 <body> 元素）的背景， 如下所述。 然而，如果用于画布背景的元素 设置了 display: none， 那么 画布背景将是透明的。

如果画布背景不是不透明的， 则其下的画布表面会显现出来。 画布表面的纹理取决于用户代理 （但通常是不透明的白色）。

2.11.1. 画布背景与根元素

根元素的背景成为画布背景，其背景绘制区域 扩展至覆盖整个画布。 然而，任何图像的大小和位置都是相对于根元素的框来计算的， 就好像它们仅为该元素绘制的一样。 （换句话说，背景定位区域是按照根元素来确定的。） 根元素不会再次绘制此背景， 即其背景的使用值为透明。

2.11.2. 画布背景与 HTML <body> 元素

对于根元素为 HTML HTML 元素 或 XHTML html 元素的文档 [HTML]： 如果 计算值为background-image在根元素上是none，并且其background-color为透明， 则用户代理必须传播 该元素的第一个 HTML BODY 或 XHTML body 子元素的计算值。 该BODY元素背景属性的使用值为其初始值， 并且传播的值被视为在根元素上指定的。 建议 HTML 文档的作者通过 BODY 元素而非 HTML 元素指定画布背景。

注意: 使用 封闭 将禁用 HTML body 元素的此特殊处理。 详情请参见CSS 封闭性 1 § 2 强封闭性: contain 属性。

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>设置画布背景</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>我的背景是大理石。</p>
  </body>
</html>

2.11.3. ::first-line 伪元素的背景

::first-line 伪元素 对于背景来说类似于行内级元素 （参见[CSS2] 的第 5.12.1 节）。 这意味着，例如，在左对齐的第一行中， 背景不一定会延伸到右边缘。

3. 边框

边框 可以是预定义的样式 （实线、双线、虚线、伪3D边框等）， 也可以是图像。 在前一种情况下，各种属性定义了 样式（border-style）， 颜色（border-color）， 和厚度（border-width） 的边框。

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

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

border-color 属性是一个 速记属性，用于在一个声明中设置 border-top-color、border-right-color、border-bottom-color 和 border-left-color。

如果只有一个组件值， 则它适用于所有边。 如果有两个值， 顶部和底部设置为第一个值， 右侧和左侧设置为第二个值。 如果有三个值， 顶部设置为第一个值， 左侧和右侧设置为第二个值， 底部设置为第三个值。 如果有四个值， 它们分别适用于顶部、右侧、底部和左侧。

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

这些属性控制边框是否显示， 以及它的样式 （如果它没有被边框图像覆盖）。

border-style 属性是一个速记属性，用于在一个声明中设置 border-top-style、border-right-style、border-bottom-style 和 border-left-style。

如果只有一个组件值， 它适用于所有边。 如果有两个值， 顶部和底部设置为第一个值， 右侧和左侧设置为第二个值。 如果有三个值， 顶部设置为第一个值， 左侧和右侧设置为第二个值， 底部设置为第三个值。 如果有四个值， 它们分别适用于顶部、右侧、底部和左侧。

样式指定为<line-style> 关键字，其中

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

值的含义如下：

none

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

hidden

与none相同， 但在解决边框冲突时的行为不同 对于表格的折叠边框模型 [CSS2]。

dotted

一系列圆点。

dashed

一系列方形短划线。

solid

单条线段。

double

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

groove

看起来像是在画布上刻出的。 （这通常通过从两个比指定的border-color稍浅和稍深的颜色中创建“阴影”来实现。）

ridge

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

inset

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

outset

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

边框绘制在元素的背景前， 但在元素的内容之前（如果它们重叠的话）。

注意：接近黑色或白色的边框颜色 可能需要不同的颜色计算，而不是中间的颜色 以创建所需的 “3D” 效果 的 groove、ridge、inset、 或 outset。

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

注意：本规范未定义不同样式的边框 在拐角处应如何连接。 另请注意，圆角可能导致拐角和内容重叠， 如果内边距小于拐角的半径。

3.3. 线条厚度: border-width 属性

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

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

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

border-width 属性是速记属性，用于在单个声明中设置 border-top-width、border-right-width、border-bottom-width 和 border-left-width。

如果只有一个组件值，则它适用于所有边。 如果有两个值， 则顶部和底部设置为第一个值， 右侧和左侧设置为第二个值。 如果有三个值， 顶部设置为第一个值， 左侧和右侧设置为第二个值， 底部设置为第三个值。 如果有四个值， 它们依次应用于顶部、右侧、底部和左侧。

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

3.4. 边框速记属性

这些速记属性设置盒子顶部、右侧、底部和左侧边框宽度、边框颜色和边框样式。 省略的值将被设置为其初始值。

border 属性是一个速记属性，用于为盒子的所有四个边设置相同的边框宽度、边框颜色和边框样式。 与速记属性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
}

4. 圆角

4.1. 曲率半径: border-radius 属性

两个<length-percentage>值的border-*-radius属性 定义了四分之一椭圆的半径， 该椭圆定义了外部边框边缘的角落形状(见下图)。 第一个值是水平半径， 第二个是垂直半径。 如果省略第二个值，则从第一个值复制。 如果任一长度为零，则角是方形的，而不是圆形的。 水平半径的百分比指的是border box的宽度， 而垂直半径的百分比指的是border box的高度。 负值是无效的。

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

border-radius速记属性设置所有四个border-*-radius属性。 如果在斜杠之前和之后给出值， 则斜杠之前的值设置水平半径， 斜杠之后的值设置垂直半径。 如果没有斜杠，则值在两个轴上均等地设置半径。 每个半径的四个值按顺序为 左上、右上、右下、左下。 如果省略左下角，则与右上角相同。 如果省略右下角，则与左上角相同。 如果省略右上角，则与左上角相同。

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;

4.2. 角的成形

内边距边缘 (内边框) 半径是外边框半径减去相应的边框厚度。 如果结果为负值，内半径为零。 (在这种情况下，边框内曲线的中心可能与外曲线的中心不一致。) 同样，内容边缘半径是 内边距边缘半径减去相应的内边距， 如果该值为负，则为零。 因此，曲线区域中的边框和内边距厚度是从相邻边插值得出的， 当两条相邻边的厚度不同，角将显示从较厚到较薄边框的平滑过渡。

所有的边框样式 (实线, 点线, 内嵌, 等等) 都遵循边框的曲线。

注意: 如果角的外曲线的中心超出了相对边的内边距边缘(在边框区域的相对一侧)， 则内曲线将不是完整的四分之一椭圆。

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

外边距边缘，位于边框边缘的外部， 通过加上对应的外边距厚度来计算其半径。 然而，为了在边框半径较小时创造更尖锐的角(从而确保圆角和尖角之间的连续性)， 当边框半径小于外边距时， 外边距乘以比例1 + (r-1)³， 其中r是边框半径与外边距的比率， 以计算外边距框形状的角半径。

4.3. 角的剪切

虽然边框图片不受border-radius的影响， 但其他剪切绘制或事件处理的效果 必须剪切到其各自的边框、内边距或内容边缘的曲线。 例如， 背景剪切到background-clip指定的曲线， overflow值为除visible以外时，剪切到 弯曲的内边距边缘(当 overflow在两个轴上都不是 visible时)，替换元素内容剪切到弯曲的内容边缘， 指针事件剪切到弯曲的边框边缘， 等等。

注意: 由于border-radius减少了元素的交互区域， 作者应确保剩余的交互区域符合他们目标平台的推荐最小标准; 特别是，符合推荐的最小触控目标尺寸可能需要在使用 border-radius时增加宽度和高度。

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

4.4. 颜色和样式过渡

颜色和样式过渡必须包含在与边框相交的段中，边框与包含两个边框半径及内曲线中心的最小矩形相交 （如果边框半径小于边框宽度，那么内曲线的中心可能是内边距边缘的一个点）。

如果其中一个边框为零宽度，则另一个边框占据整个过渡区域。 否则，相邻边框之间的颜色和样式过渡的中心是沿着曲线的一个点，该点是边框宽度比例的单调函数。 然而，尚未定义这些过渡的外观以及从该比例到曲线上点的映射函数。

4.5. 重叠的曲线

角的曲线不能重叠： 当任意两个相邻边框半径的和超过边框盒的大小时， 用户代理必须按比例减少所有边框半径的使用值，直到它们不再重叠。 缩小半径的算法如下：

设f = min(L_i/S_i), 其中i ∈ {上, 右, 下, 左}, S_i 是边i对应的两个半径的和， L_上 = L_下 = 盒子的宽度， L_左 = L_右 = 盒子的高度。 如果f < 1，则所有角的半径都乘以f。

注意: 该公式确保四分之一圆仍然是四分之一圆， 大半径仍然比小半径大， 但它可能会减少已经足够小的角， 这可能使看起来相同的相邻元素的边框看起来不同。

如果曲线干扰了UI元素（如滚动条）， 用户代理可以进一步减少受影响边框半径的使用值（仅减少受影响的边框半径）， 但只减少必要的部分，不再减少。

例如，下面的图中的边框A可能是由以下代码生成的

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

高度(2.5em)足够满足指定的半径(0.5em加2.0em)。 然而，如果高度只有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。

4.6. 对表格的影响

border-radius 属性适用于 table、inline-table 和 table-cell 框， 在分隔的边框模式下（border-collapse: separate）。 当 border-collapse 为 collapse 时，它们没有效果。

5. 边框图像

作者可以指定图像来代替边框样式。 在这种情况下，边框的设计取自使用 border-image-source 指定的图像的边和角， 这些部分可以以各种方式切割、缩放和拉伸以适应边框图像区域的大小。 border-image 属性不影响布局： 盒子的布局、内容及其周围的内容 仅基于 border-width 和 border-style 属性。

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

这是一个更复杂的示例， 展示了边框图像如何对应于后备的边框样式，但也可以扩展到超出边框区域。 边框图像是带有扩展角效果的波浪形绿色边框：

然后其他边框属性相互作用 以如下方式布局图块：

这里，即使 border-width 为12px， border-image-width 属性计算为124px。 边框图像区域 向外扩展31px，进入外边距区域。 如果边框图像加载失败 （或用户代理不支持边框图像）， 后备渲染将使用绿色双线边框。

.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' */
}

5.1. 图像来源: border-image-source 属性

指定一个图像作为边框使用， 代替由 border-style 属性 指定的渲染方式， 并且如果在 fill 关键字在 border-image-slice 中给出， 则作为元素的额外图像背景。 如果值为 none 或图像无法显示 （或属性不适用），将使用边框样式； 否则元素的 border-style 边框不被绘制， 并按照下文所述绘制这个 边框图像。

5.2. 图像切割: border-image-slice 属性

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

如果只有一个值， 则适用于所有边。 如果有两个值， 第一个值用于上下， 第二个值用于左右。 如果有三个值， 第一个值用于顶部， 第二个值用于左右， 第三个值用于底部。 如果有四个值， 它们分别适用于顶部、右侧、底部和左侧。

<percentage [0,∞]>

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

<number [0,∞]>

数字表示图像中的像素 （如果图像是栅格图像）， 或向量坐标 （如果图像是向量图像）。

fill

如果存在 fill 关键字， 则会保留边框图像的中间部分。 （默认情况下它会被丢弃，即视为空白。）

负值无效。 大于图像大小的计算值将被解释为 100%。

由 border-image-slice 属性指定的区域可以重叠。 然而，如果右边和左边的宽度之和 等于或大于图像的宽度， 顶部和底部边缘以及中间部分的图像将为空——这将与指定了一个 透明的非空图像的效果相同。 顶部和底部的值也是如此。

如果需要确定切片的图像必须调整大小 （例如，对于没有 自然尺寸 的 SVG 图像）， 那么它将使用 默认大小算法 进行调整， 没有 指定大小，并且以 边框图像区域 作为 默认对象大小。

5.3. 绘制区域: border-image-width 属性

边框图像 绘制在 一个称为 边框图像区域 的区域内。 默认情况下，该区域的边界与 边框框 对应， 请参阅 border-image-outset。

border-image-width 的四个值指定偏移量， 用于将 边框图像区域 分为九个 区域。 偏移量代表从区域的上、右、下、左侧向内的距离。

如果只有一个值， 则适用于所有边。 如果有两个值， 第一个值用于上下， 第二个值用于左右。 如果有三个值， 第一个值用于顶部， 第二个值用于左右， 第三个值用于底部。 如果有四个值 它们分别适用于顶部、右侧、底部和左侧。

值的含义如下：

<length-percentage [0,∞]>

百分比相对于 边框图像区域 的大小： 水平偏移相对于该区域的宽度， 垂直偏移相对于高度。

<number [0,∞]>

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

auto

如果指定了 auto， 那么使用的 border-image-width 为 对应图像切片的 自然 宽度或高度（以适用者为准）， 参见 border-image-slice。 如果图像没有所需的 自然尺寸， 则使用对应计算的 border-width。

任何 border-image-width 值的负值无效。

如果两个相对的 border-image-width 偏移足够大以至于重叠， 那么所有 border-image-width 偏移的 使用值 将按比例减少， 直到它们不再重叠。 用数学符号表示： 给定 L_width 为 边框图像区域 的宽度，L_height 为其高度， W_side 为 border-image-width 偏移侧的 side， 让 f = min(L_width/(W_left+W_right), L_height/(W_top+W_bottom))。 如果 f < 1， 那么所有 W 将乘以 f 进行减少。

5.4. 边缘外延: border-image-outset 属性

这些值指定了 边框图像区域 超出 边框框 的扩展量。

如果只有一个值， 则适用于所有边。 如果有两个值， 第一个值用于上下， 第二个值用于左右。 如果有三个值， 第一个值用于顶部， 第二个值用于左右， 第三个值用于底部。 如果有四个值， 它们分别适用于顶部、右侧、底部和左侧。

<length [0,∞]>

表示指定长度的外延。

<number [0,∞]>

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

负值无效。

在 边框框 外渲染的边框图像部分不会触发滚动。 此外，这些部分对鼠标事件不可见， 也不会为元素捕获这些事件。

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

5.5. 图像平铺: border-image-repeat 属性

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

stretch

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

repeat

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

round

图像被平铺（重复）以填充其对应的 区域。 如果它无法通过完整的平铺填充区域， 则图像将按比例重新缩放以适应。

space

图像被平铺（重复）以填充其对应的 区域。 如果无法通过完整的平铺填充区域， 则多余的空间将在平铺之间分配。

边框图像部分的确切缩放和平铺过程将在以下部分中给出。

5.6. 绘制边框图像

在由 边框图像 和 border-image-source 提供的图像被 border-image-slice 值切割后, 生成的九个图像将按以下四个步骤缩放、定位并平铺到其相应的 边框图像区域中：

1. 缩放到 border-image-width。
   • 顶部和底部边缘的两个图像分别缩放到与其相应的 边框图像区域 一样高，并按比例缩放其宽度。
   • 左右边缘的图像分别缩放到与其相应的 边框图像区域 一样宽，并按比例缩放其高度。
   • 角落的图像被缩放到与其各自的 边框图像区域 一样宽和高。
   • 中间图像的宽度按顶部图像的缩放因子缩放，除非该因子为零或无限大，此时使用底部的缩放因子代替，如果也不可行，则不缩放宽度。中间图像的高度按左边图像的缩放因子缩放，除非该因子为零或无限大，此时使用右边图像的缩放因子代替，如果也不可行，则不缩放高度。
2. 缩放到 border-image-repeat。
   • 如果第一个关键字是 stretch， 则顶部、中间和底部的图像将进一步缩放，填充 边框图像区域 的中间部分。高度不再进一步改变。
   • 如果第一个关键字是 round， 则顶部、中间和底部的图像将调整大小，以确保它们恰好以整数平铺适应 边框图像区域 中的中间部分，方式与 round 在 background-repeat 属性中的效果一样。
   • 如果第一个关键字是 repeat 或 space， 则顶部、中间和底部的图像不再进一步改变。
   • 第二个关键字为 stretch、round、repeat 和 space 的效果与第一个关键字类似，作用于左、中和右图像的高度。
3. 放置第一个平铺。
   • 如果第一个关键字是 repeat， 则顶部、中间和底部的图像在其各自的区域中水平居中。否则，图像将放置在 边框图像区域的左边缘。
   • 如果第二个关键字是 repeat， 则左、中和右图像在其各自的区域中垂直居中。否则，图像将放置在 边框图像区域的顶部边缘。
4. 平铺并绘制。
   • 然后图像被平铺以填充其各自的区域。
   • 对于 space，任何部分平铺将被丢弃，额外的空间将在平铺之前、之后和之间分配。（即，平铺前后的间隙和平铺之间的间隙将被均衡分配。）这可能会导致边框图像的侧面区域为空。
   • 图像在与正常边框相同的堆叠层级绘制：紧贴背景层之前。
   • 除非在 fill 中指定了 border-image-source，否则不绘制中间图像。

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

这是一个简写属性，用于在一个声明中设置 border-image-source， border-image-slice，border-image-width，border-image-outset， 以及 border-image-repeat。 省略的值将被设置为其 初始值。

5.8. 对表格的影响

border-image 属性适用于设置了 border-collapse 为 collapse 的表格和内联表格的边框。 然而，本规范并未定义如何渲染这样的图像边框。 特别是，它没有定义图像边框如何与单元格、行和行组在表格边缘的边框相互作用 （参见 边框冲突解决 在 [CSS2] 中）。

预计未来的规范将定义渲染方式。 建议用户代理在此之前不要将边框图像应用于具有折叠边框的表格。

6. 杂项效果

注意：box-decoration-break 属性， 定义了背景和边框如何应用于分段盒子， 已经移动到 CSS Fragmentation Module。 [CSS-BREAK-3]

6.1. 投影: box-shadow 属性

box-shadow 属性为盒子附加一个或多个阴影。 该属性接受 none 值, 表示无阴影, 或以逗号分隔的阴影列表, 从前到后排序。

每个阴影表示为 <shadow>, 由 2-4 个长度值、一个可选的颜色和一个可选的 inset 关键字组成。 省略的长度为 0；省略的颜色默认为 currentColor。

<shadow> = <color>? && [<length>{2} <length [0,∞]>? <length>?] && inset?

每个 <shadow> 的组成部分解释如下:

第一个 <length>

指定阴影的 水平偏移。 正值绘制的阴影偏移到盒子的右侧，负值则偏移到左侧。

第二个 <length>

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

第三个 <length [0,∞]>

指定 模糊半径。 负值无效。如果模糊值为 0，则阴影边缘是清晰的。否则，值越大，阴影边缘越模糊。 参见 阴影模糊，如下。

第四个 <length>

指定 扩展距离。 正值使阴影向所有方向扩展，负值使阴影收缩。 参见 阴影形状，如下。

注意: 对于内阴影，扩展阴影（创建更多阴影区域） 意味着收缩阴影的外形。

<color>

指定阴影的颜色。 如果没有指定颜色，默认为 currentColor。

inset

如果出现，inset 关键字将阴影从 外阴影 （将阴影投射在画布上， 如同它被抬离画布） 变为 内阴影 （将画布的阴影投射到盒子上， 如同盒子被从画布上切下并放在后面）。

下面的示例演示了阴影扩展和模糊的效果:

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.1.1. 阴影形状、扩展和叠加

外部盒阴影 会投射出一个阴影，仿佛元素的边框框是完全不透明的。 假设扩展距离为零，其周长与边框框的大小和形状完全相同。 阴影只绘制在边框的外边缘：阴影被裁剪到元素的边框框内部。

内部盒阴影 会投射出一个阴影，仿佛填充边缘以外的所有内容都是不透明的。 假设扩展距离为零，其周长与填充框的大小和形状完全相同。 阴影只绘制在填充边缘的内部：阴影被裁剪到元素的填充框外部。

如果定义了 扩展距离， 上述阴影的周长会被向外扩展（对于 外部盒阴影） 或向内收缩（对于 内部盒阴影）， 通过将阴影的直边向外扩展（对于内阴影则向内收缩）， 并将结果宽度/高度四舍五入到零。

下面是一些橙色框带有蓝色边框和阴影的示例。

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 /* 扩展 */
box-shadow: rgba(0,0,0,0.4) 10px 10px 0 10px /* 扩展 */ inset

为了在应用扩展时保持盒子的形状，阴影的角半径也会增加（对于内阴影则减少）， 从边框框（填充框）角半径中加（减去）扩展距离，并向下舍入至零。 然而，为了在边框半径较小时创造一个更锐利的角（以确保圆角和尖角之间的连续性）， 当边框半径小于 扩展距离时（或在内阴影的情况下， 小于负值扩展距离的绝对值）， 在计算扩展阴影形状的角半径时，扩展距离首先 乘以比例 1 + (r-1)³， 其中 r 是边框半径与 扩展距离的比率。 例如，如果边框半径为10px，扩展距离为20px (r = 0.5)， 阴影形状的角半径将是10px + 20px × (1 + (.5 - 1)³) = 27.5px， 而不是30px。 该调整将独立应用于每个维度的半径。

border-image 不会影响阴影的形状。

6.1.2. 模糊阴影边缘

非零的 模糊半径 表示生成的阴影应被模糊处理，例如通过高斯滤波器。 精确的算法未定义； 但生成的阴影必须近似于 （每个像素的值应在其预期值的5%范围内） 通过对阴影应用 标准偏差等于模糊半径一半的高斯模糊所生成的图像。

注意： 这意味着对于长而直的阴影边缘， 模糊半径会在与阴影边缘垂直且居中的大约两倍模糊半径的长度范围内 产生一个可见的颜色过渡， 从阴影内部的端点处接近完全的阴影颜色， 到阴影外部的端点处接近完全透明。

6.1.3. 层叠、布局和其他细节

阴影效果从前往后应用： 第一个阴影在顶部，其他阴影依次在后面叠加。 阴影不影响布局，可能与其他盒子、文本或它们的阴影重叠（或被它们重叠）。 在堆叠上下文和绘制顺序中， 元素的外部阴影绘制在该元素的背景下方， 而元素的内部阴影绘制在该元素的背景上方 （若有边框和边框图像，则绘制在它们下方）。

除非另有规定，阴影仅应用于主要框。 如果受影响的框有多个碎片， 阴影按照box-decoration-break的规定应用。

阴影不会触发滚动或增加可滚动溢出区域的大小。

在边框折叠模型中，外部阴影对内部表格元素无效。 如果在具有多重边框厚度的边框折叠模型中定义了一个阴影 （例如，一个表格的外部阴影，其中一行的边框比其他行更厚， 或者在与具有不同边框厚度的单元格相邻的跨行单元格上定义了内部阴影）， 则其阴影的精确位置和渲染是未定义的。

7. 层级

本节为信息性内容。 CSS 具有不同的特性层级，每个层级都是另一个层级的子集。 （参见 [CSS-2017] 了解完整说明。） 以下列表描述了本规范中的哪些特性在每个层级中。

7.1. 第一级

• background-color
• background-image 仅限一个图像（无图层）
• background-repeat：仅限 repeat | repeat-x | repeat-y | no-repeat
• background-attachment：仅限 scroll | fixed
• background-position：仅限一个或两个值
• background 简写：仅限颜色、图像、重复、附着和位置
• border-color 属性
• border-style 属性
• border-width 属性
• border-top，border-bottom，border-right，border-left，以及 border 简写

7.2. 第二级

• background-color
• background-image：仅限一个图像（无图层）
• background-repeat：仅限 repeat | repeat-x | repeat-y | no-repeat
• background-attachment：仅限 scroll | fixed
• background-position：仅限一个或两个值
• background：仅限颜色、图像、重复、附着和位置
• border-color 属性
• border-style 属性
• border-width 属性
• border-top，border-bottom，border-right，border-left，以及 border 简写

7.3. 第三级

• CSS 背景与边框模块第三级中描述的所有特性

8. 变更

8.1. 自 2023 年 2 月 14 日候选推荐快照以来的变更

• 定义了 background-position 的序列化规则，详见 § 2.6.1 background-position 值的序列化。 (Issue 2274)
• 还原了 将 <color> 移至 <final-bg-layer> 前面的更改，该更改涉及 background 简写。 (Issue 8496)
• 规定了 边框宽度 向设备像素取整的规则。 (Issue 7434)
• 规定了 border-radius 与按轴 overflow 长手法的相互作用。 (Issue 5210)
• 修正了 background-image 的计算值行中的错误。 (Issue 8604)
• 移除了 <box> 定义， 并用 <visual-box> 引用替代， 因为盒子模块现在定义了这些术语。
• 调整了属性定义表格，使其符合最新期望， 包含“动画类型”和“逻辑属性组”。
• 使用最新的 值定义语法，简化了属性语法定义。
• 修正了 box-shadow 应用位置的定义。 (Issue 9286)

8.2. 自 2020 年 12 月 22 日候选推荐快照以来的变更

• 澄清了关于当根元素未生成盒子时不传播背景的规则仅适用于 display: none， 而不适用于 display: contents。 (Issue 3779)
• 精确定义了 border-width 的 thin、 medium 和 thick 尺寸。 (Issue 7254)
• 一些编辑性改进。

8.3. 自 2017 年 10 月 17 日候选推荐以来的变更

• 调整了 <shadow> 的语法顺序，以匹配浏览器的序列化方式，以及 text-shadow 和 drop-shadow()。 (Issue 2305)

  <shadow> = inset<color>? && <length>{2,4} && <color>inset?

• 仅在半径曲率增加时，应用阴影和边距的扩展半径调整，而非缩小时。 (Issue 1900)

  为了在应用扩展时保持盒子的形状，阴影的角半径也随边框盒的半径增加（内阴影则减少） spread distance （并取整为零）。 然而，为了在边框半径较小时创建更尖锐的角 （从而确保圆角与尖角之间的连续性）， 当 border radius 小于 spread distance 时 （或者对于内阴影， 小于负 spread distance 的绝对值）， spread distance 乘以比例 1 + (r-1)³， 其中 r 为边框半径与 spread distance 的比率， 以计算扩展阴影形状的角半径。

• 澄清了在 <color> 中省略的值在 <shadow> 中默认为 currentColor， 而不是某个具有相同行为的神秘未命名值。 (2766)

  如果颜色省略， 则默认为 currentColor 所用颜色取自 color 属性。

• 清理并规范化了属性定义表中的“动画类型”和“计算值”行。
• 更改了语法以使用新的 CSS 方括号范围符号 以反映对负值的限制， 并纠正了上一次发布中引入的一些语法定义错误。
• 一些编辑性改进。

8.4. 自 2014 年 9 月 9 日候选推荐以来的变更

自 2014 年 9 月 9 日候选推荐以来，本规范做了以下（非琐碎的）更改：

• 添加了缺失的定义 box-shadow: none。 （显然这很明显，以至于直到现在才有人注意到它缺失了。）
• 将 <'background-color'> 组件在序列化时移至前面， 因为一些作者似乎期望如此，尽管这不太合理？
• 取消了 border-radius 对于折叠边框表格的影响。
• 将 <position> 重命名回 <bg-position>，因为其他属性将省略三值语法。

8.5. 自 2014 年 2 月 4 日最后一次呼叫工作草案以来的变更

自 2014 年 2 月 4 日最后一次呼叫工作草案以来，本规范做了以下（非琐碎的）更改：

• 修正了当扩展半径和边距半径大于边框半径时，仅应用调整因子的计算方法。
• 定义了当根元素具有 display: none 时如何处理画布背景。

完整的 意见处置 可用。

8.6. 自 2012 年 7 月 24 日候选推荐以来的变更

自 2012 年 7 月 24 日候选推荐以来，本规范做了以下（非琐碎的）更改：

• 允许 <'background-clip'> 和 <'background-origin'> 可以在 background 简写中由其他组件值分隔， 因为这是实际实现的。
• 允许 <color> 和 inset 在 box-shadow 中以任何顺序交错， 因为它们并不模棱两可，CSS 通常在没有歧义的情况下允许不同的顺序。
• 定义了 box-shadow 扩展曲率的逐步增加的角半径公式， 以在尖角（border-radius = 0）和弯曲角（border-radius > spread distance）之间创建连续性。 这也为所有中间状态提供了更好的结果。
• 添加了如何响应边框半径来弯曲边距边缘的定义。 （这与 [CSS-SHAPES] 相关，但不会改变对 CSS 背景和边框第 3 级的符合性。）
• 移除了 box-decoration-break；它现在是 [CSS-BREAK-3] 的一部分。
• 收紧了 box-shadow 的扩展定义。
• 澄清了 border-style 的 none 也意味着初始 border-image-width 为零 （因为 border-image-width 最初设置为计算的 border-width，在这种情况下为零）。
• 澄清了 background-attachment: local 如何受滚动影响。
• 简化了 background-position 的计算值，以澄清所有 background-position 值是可插值的。
• 为每个属性定义表添加了“动画类型”值。

8.7. 自 2012 年 4 月 17 日候选推荐以来的变更

自 2012 年 4 月 17 日候选推荐以来，本规范做了以下（非编辑性）更改：

• 修正了 background-position 的计算值错误： 计算值是位置列表。
• 添加了一条说明，指出当 border-radius 减少交互区域时，可能需要增加框的宽度/高度。

8.8. 自 2012 年 2 月 14 日“最后呼叫”工作草案以来的变更

自 2012 年 2 月 14 日“最后呼叫”工作草案以来，本规范做了以下（非编辑性）更改：

这些更改是对评论期内收到的意见的回应。详细信息请参见完整的 意见处置。

• 2.1 节：定义了本模块中的哪些属性适用于 ::first-line 和 ::first-letter 伪元素。
• 3.4 节：修正了 background-repeat 计算值的错误定义。 该值始终是关键字对，而不是单个关键字。
• 3.10 节：将缺失的 background-image 添加到 background 属性重置的属性列表中。
• 4.3 节：添加了 border-width 上负长度无效的说明。
• 5.1 节：添加了 border-radius 上负长度无效的说明。
• 6.8 节：添加了 border-image 对于带有折叠边框的表格的影响的部分，并添加了将在以后定义渲染的说明。

8.9. 自 2011 年 2 月 15 日候选推荐以来的变更

自 2011 年 2 月 15 日候选推荐以来，本规范做了以下更改：

• 3.9 节： 定义了如果 background-size 具有两个 auto 值且图像缺少自然大小时的处理方式。

  如果两个值均为 auto，则应使用图像的自然宽度和/或高度（如果有） ，缺失的维度（如果有）按上述的 ‘auto’ 行为处理 。

• 5.4 节： 在拐角连接处将颜色和样式过渡的中心定义为不确定（在一定限度内），因为之前的定义是错误的。

  相邻边框之间颜色和样式过渡的中心位于曲线上一个与边框宽度比率成比例的角度点。 例如，如果顶部和右边边框宽度相等，则该点位于水平 45° 角处，如果顶部是右侧宽度的两倍，则该点位于水平 30° 角处。 此过渡的线条在外弧上该角度的点与内弧上该角度的点之间绘制。 如果其中一个边框为零宽度，则另一个边框占据整个过渡区域。 否则，相邻边框之间的颜色和样式过渡的中心必须与边框宽度的比例成正比，以使其位置的函数相对于此比例是连续的。 但是，过渡的外观或“比例”如何映射到曲线上的点尚未定义。

• 6.2 节： 定义了必须先调整大小以确定切片位置的 边框图像切片。 添加：

  如果必须调整图像大小以确定切片位置（例如，对于没有自然尺寸的 SVG 图像）， 则使用边框图像区域作为默认对象大小来调整大小，而不是使用背景定位区域。

• 7.1 节：可选地将双向强制换行添加到受 box-decoration-break 影响的换行类型中。 添加：

  用户代理还可以将 'box-decoration-break' 应用于双向强制换行的控制渲染， 即当双向重排导致内联元素分割成不连续的片段时。 否则，此类换行始终按 'slice' 处理。

• 7.2 节： 定义了 box-shadow 的默认颜色。

  颜色是阴影的颜色。 如果颜色缺失，则使用 ‘color’ 属性的颜色。

• 3.6 节： 澄清了 background-position 的计算值。

  如果指定了一个或两个值，对于 <length> 是绝对长度，否则是百分比。 如果指定了三个或四个值，则是一个加上一个长度或百分比的关键字对。 两个关键字表示起点和两个相对于该起点的偏移，每个偏移值表示为绝对长度（如果给定 <length>），否则表示为百分比。

  将 Equivalent 更改为 Computes 在关键字的定义中。
• 向属性定义表中添加了 “动画类型” 行。
• 3.6 节： 将 <bg-position> 生产规则重命名为 <position>，以便在其他规范中更容易重用，并重新表述了语法，使其更详细但更易于理解。

  bg-position<position> = [
    [ left | center | right | top | bottom | <length-percentage> ]
  |
    [ left | center | right | <length-percentage> ]
    [ top | center | bottom | <length-percentage> ]?
  |
    [ center | [ left | right ] <length-percentage>? ] &&
    [ center | [ top | bottom ] <length-percentage>? ]
  ]
  

• 6.5 节： 向 space 关键字添加到 border-image-repeat 属性值表： 它被包含在允许值列表中，但未包含在语法定义中。

  [ stretch | repeat | round | space ]{1,2}

• 5.5 节： 修正了 border-radius 示例中的数学错误。

  高度 (2.5em) 足以容纳指定的半径（0.5em 加上 2.5em 2.0em ）。

• 4.3 节： 将 border-width 的百分比字段标记为 N/A，因为它们未包含在该属性中。

8.10. 自 2009 年 12 月 17 日候选推荐以来的变更

自 2009 年 12 月 17 日候选推荐以来，本规范做了以下更改：

• 添加了 content-box 值到 background-clip。
• 更改了 background 简写语法，适用于 background-clip 和 background-origin。
• 删除了在 border-radius 产生曲线时推荐使用渐变进行颜色过渡的建议。
• 重新添加了 box-shadow 属性。
• 各种澄清和说明。

9. 致谢

Tapas Roy 是 Border 模块的编辑，后来与 Background 模块合并。

感谢 Ben Stucki 定义了当两个相邻边框厚度不等或其中一个为零时圆角的处理方式； 感谢 Arjan Eising 和 Anne van Kesteren 对 border-radius 语法的贡献； 感谢 Zack Weinberg 提供了拐角过渡区域的图示； 特别感谢 Lea Verou、plinss 和 dbaron 提供了拐角半径调整公式（特别感谢 Lea 提供了现场演示）。

最初由 fantasai 提出了一组用于边框图像的属性。当前的简化版本（将一张图像切割成九个部分）由 Ian Hickson 提出。 （不过最初的想法似乎来源于一些匿名的微软工程师。）

最后，特别感谢 Brad Kemper 对草案中许多功能的反馈和建议，感谢他绘制了所有的 box-shadow 示例， 并感谢他提出了一些 激进的变更， 这些变更解决了早期定义中的一些问题，尤其是 border-image 属性。

10. 隐私考虑

本规范未引入任何新的隐私考虑。

11. 安全考虑

本规范未引入任何新的安全考虑。