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 伪元素。UA 可以（但不要求）将 border-image 或 box-shadow 属性应用于 ::first-line。UA 不得将 边框颜色/样式/宽度属性 应用于 ::first-line。[CSS2]

1.2. 值定义

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

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

2. 背景

每个盒子都有一个背景层，它可以是完全透明的（默认值），或者填充有颜色和/或一个或多个图像。背景属性指定要使用的颜色（background-color）和图像（background-image），以及它们如何进行尺寸调整、定位、平铺等。

背景属性不可继承，但由于 background-color 的初始值为 transparent，父盒子的背景默认会透显出来。

2.1. 多重背景图像的分层

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

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

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;

列表中的第一张图像是离用户最近的 层，下一张图像绘制在第一张后面，依此类推。背景颜色（如果存在）绘制在所有其他 层 的下方。

注意： 边框图像属性 也可以定义一个背景图像，如果存在，它将绘制在由背景属性创建的背景 层 之上。

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

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

h1 { background-color: #F00 } /* Sets background to red. */

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

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

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

<bg-image> = <image> | none

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

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

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

出于无障碍考量，作者不应仅使用背景图像作为传达重要信息的唯一方法。请参阅 Web 内容无障碍指南 F3 [WCAG20]。图像在非图形呈现中是不可访问的，且背景图像在对比度高的显示模式下可能会被关闭。

注意： 样式性的前景图像可以使用 CSS 的 content 属性提供。具有语义重要性的前景图像应在文档标记中提供，例如使用 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

round

计算为 round round

no-repeat

计算为 no-repeat no-repeat

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

repeat

图像 会根据需要在此方向上进行重复，以覆盖整个 背景绘制区域。

空格

图像 会重复，直至填满 背景定位区域 且不被裁剪，然后这些图像会均匀分布以填满该区域。第一张和最后一张图像触及区域边缘。如果 背景绘制区域 大于 背景定位区域，则该图案会重复以填满整个背景绘制区域。在此轴上，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 属性

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

<attachment> = scroll | fixed | local

fixed

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

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

local

背景相对于盒子的内容固定：如果盒子有滚动机制，背景会随盒子的内容一起滚动，且 背景绘制区域 和 背景定位区域 是相对于盒子的 可滚动溢出区域 而不是相对于框住它们的边框。因为 可滚动溢出区域 不包含 边框区域，对于 滚动容器，background-clip 的 border-box 值可能会被当作 padding-box 处理。

scroll

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

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

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

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

body {
  /* For all UAs: */
  background: white url(paper.png) scroll;
  /* For UAs that do fixed backgrounds: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* For all UAs: */
  background: silver;
  /* For UAs that do fixed backgrounds: */
  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> 类型的值的 指定值 (specified value) 和 计算值 (computed value) 的序列化方式与 [CSS-VALUES-4] 中定义的 <position> 完全相同。对于 3 值产生式（在 <position> 中无效），指定值 的序列化与等效的 4 值语法相同，不同之处在于省略的偏移量保持省略。

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

确定 背景绘制区域，这决定了背景在其中绘制的范围。值具有以下含义

border-box

背景被绘制在（裁剪到）边框盒子 (border box) 内。

padding-box

背景被绘制在（裁剪到）内边距盒子 (padding box) 内。

content-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 为 top left（初始值），且元素具有非零边框，则 背景图像 的顶部和左侧边缘将被裁剪。

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

2.9. 图像尺寸：background-size 属性

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

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

值的含义如下：

contain

在保持其 自然纵横比（如果有）的同时，将图像缩放至最大尺寸，使得其宽度和高度都能放入 背景定位区域。

cover

在保持其 自然纵横比（如果有）的同时，将图像缩放至最小尺寸，使得其宽度和高度都能完全覆盖 背景定位区域。

[ <length-percentage [0,∞]> | 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;            /* default */
background-image: url(flower.png) }

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

如果 background-repeat 在一个（或两个）维度上为 round，则有第二步。UA 必须在该维度（或两个维度）上缩放图像，使其在 背景定位区域 中刚好容纳整数次。以宽度为例（高度类似）

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

如果 background-repeat 仅在一个维度上为 round，且另一个维度上的 background-size 为 auto，则存在第三步：另一个维度被缩放，以恢复原始纵横比。

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

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* default */
  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 属性是一个 简写属性 (shorthand property)，用于在样式表的同一位置设置大多数背景属性。逗号分隔项的数量定义了 背景图像层 的数量。对于给定的有效声明，对于每一层，简写属性首先将 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. 特殊元素的背景

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

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

2.11.1. 画布背景与根元素

根元素 的背景成为 画布背景，其 背景绘制区域 延伸以覆盖整个 画布。然而，任何图像都是相对于根元素的盒子进行尺寸调整和定位的，就好像它们是专门为该元素绘制的一样。（换句话说，背景 定位 区域 的确定方式与根元素相同。）根元素不会再次绘制此背景，即其背景的 使用值 为 transparent。

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

对于根元素为 HTML HTML 元素或 XHTML html 元素 [HTML] 的文档：如果 根元素 上的 background-image 的 计算值 (computed value) 为 none 且其 background-color 为 transparent，用户代理必须改为从该元素的第一个 HTML BODY 或 XHTML body 子元素传播背景属性的 计算值。该 BODY 元素背景属性的 使用值 是其 初始值，并且传播的值被视为好像是在根元素上指定的。建议 HTML 文档的作者使用 BODY 元素而不是 HTML 元素来指定画布背景。

注意： 使用 包含 (containment) 会禁用对 HTML body 元素的这种特殊处理。详情请参阅 CSS Containment 1 § 2 强包含：contain 属性。

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>Setting the canvas background</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>My background is marble.</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 的初始值也将解析为零。

该组件可以在本包或其他任何使用包的其他组件中被引用；它不能在使用包中被不同的组件覆盖。

与 none 相同，但在边框折叠表格 [CSS2] 的边框冲突解决规则中具有不同的行为。

dotted

一系列圆点。

dashed

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

solid

单条实线段。

double

两条平行的实线，中间有一定间隔。（线条的粗细未指定，但线条与间隔的总和必须等于 border-width。）

groove

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

ridge

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

inset

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

outset

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

边框绘制在元素背景的前面，但在元素内容（如果重叠）的后面。

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

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

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

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-width、border-color 和 border-style。省略的值将设置为其初始值。

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
}

4. 圆角

4.1. 曲线半径：border-radius 属性

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

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. 拐角整形

内边距边缘（内边框）半径等于外边框半径减去相应的边框厚度。如果结果为负值，则内半径为零。（在这种情况下，边框内曲线的中心可能不会与外曲线的中心重合。）同样，内容边缘半径等于 内边距边缘 半径减去相应的 内边距，如果结果为负值，则为零。因此，曲线区域的边框和内边距厚度是从相邻边插值得到的；当两个相邻边框的厚度不同时，拐角将显示出厚边框和薄边框之间的平滑过渡。

所有边框样式（solid、dotted、inset 等）都遵循边框的曲线。

注意： 如果一个拐角外曲线的中心超过了相对的 内边距边缘（在该拐角对面的侧面的 边框区域 中），内曲线将不是完整的四分之一椭圆。

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 指定的曲线，非 visible 的 overflow 值剪裁到弯曲的 内边距边缘（当两个轴上的 overflow 均不为 visible 时），替换元素 内容剪裁到弯曲的 内容边缘，指针事件剪裁到弯曲的 边框边缘 等。

注意： 由于 border-radius 减少了元素的交互区域，作者应确保剩余的交互区域符合其目标平台的建议最小值；特别是当使用 border-radius 时，可能需要更大的宽度和高度以符合建议的最小触摸目标尺寸。

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

4.4. 颜色和样式过渡

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

如果这些边框之一为零宽度，则另一个边框占用整个过渡区域。否则，相邻边框之间颜色和样式过渡的中心是曲线上的一个点，该点是边框宽度比率的连续单调函数。然而，未定义这些过渡的样子，也未定义将此比率映射到曲线上某一点的函数。

4.5. 曲线重叠

拐角曲线不得重叠：当任意两个相邻边框半径之和超过边框盒大小时，UA 必须成比例地减小所有边框半径的实际值，直到它们都不重叠。减小半径的算法如下

令 f = min(L_i/S_i)，其中 i ∈ {top, right, bottom, left}，S_i 是侧面 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 加 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 属性确实适用于分离边框模式（border-collapse: separate）下的 table、inline-table 和 table-cell 盒子。当 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-style，但也可能延伸到边框区域之外。边框图片是一个带有延伸拐角效果的波浪形绿色边框

其余边框属性随后相互作用，以如下方式布局切片

这里，即使 border-width 为 12px，border-image-width 属性也计算为 124px。边框图片区域 随后从 边框盒 向外突出 31px 并进入 外边距区域。如果边框图片加载失败（或 UA 不支持边框图片），回退渲染将使用绿色双线边框。

.notebox {
  border: double orange;
  /* must set 'border' shorthand first, otherwise it erases 'border-image' */
  border-image: url("border.png") 30 round;
  /* but other 'border' properties can be set after */
  border-width: thin thick;
}
...
.sidebar .notebox {
  box-shadow: 0 0 5px gray;
  border-radius: 5px;
  border: none; /* turn off all borders */
  /* 'border' shorthand resets 'border-image' */
}

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

指定一张图片用作边框，以代替 border-style 属性指定的渲染；如果给定 border-image-slice 中的 fill 关键字，则作为元素的附加图片背景。如果值为 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 为 side 侧的 border-image-width 偏移量，令 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

图片被平铺（重复）以填满其对应的 区域。如果它不能用整数个切片填满该区域，则图片会被重新缩放以实现此目的。

空格

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

缩放和平铺边框图片部分的精确过程见下文。

5.6. 绘制边框图片

在 border-image-source 给出的 边框图片 被 border-image-slice 值切片后，所得的九张图片将分四步缩放、定位并平铺到它们对应的 边框图片区域 中

1. 缩放到 border-image-width。
   • 顶部和底部边缘的两张图片被分别制作得与顶部和底部 边框图片区域 一样高，其宽度按比例缩放。
   • 左侧和右侧边缘的图片被分别制作得与左侧和右侧 边框图片区域 一样宽，其高度按比例缩放。
   • 拐角图片被缩放到与其各自的 边框图片区域 一样宽和高。
   • 中间图片的宽度按与顶部图片相同的系数进行缩放，除非该系数为零或无穷大，这种情况下将替换为底部的缩放系数；如果还不行，则宽度不进行缩放。中间图片的高度按与左侧图片相同的系数进行缩放，除非该系数为零或无穷大，这种情况下将替换为右侧图片的缩放系数；如果还不行，则高度不进行缩放。
2. 缩放到 border-image-repeat。
3. 如果第一个关键字是 stretch，则顶部、中间和底部图片会被进一步缩放，使其与 边框图片区域 的中间区域一样宽。高度不会再有任何改变。
4. 如果第一个关键字是 round，则顶部、中间和底部图片会在宽度上进行调整，以便恰好整数个图片能够适合 边框图片区域 的中间区域，这与 background-repeat 属性中的 round 完全相同。
5. 如果第一个关键字是 repeat 或 space，则顶部、中间和底部图片不会再有任何改变。
6. 第二个关键字的 stretch、round、repeat 和 space 的效果是类似的，作用于左侧、中间和右侧图片的高度。
7. 定位第一个切片。
8. 如果第一个关键字是 repeat，则顶部、中间和底部图片在各自的区域内水平居中。否则，图片被放置在 边框图片区域 各自区域的左边缘。
9. 如果第二个关键字是 repeat，则左侧、中间和右侧图片在各自的区域内垂直居中。否则，图片被放置在 边框图片区域 各自区域的顶部边缘。
10. 平铺并绘制。
11. 然后平铺这些图片以填满各自的区域。
12. 在 space 的情况下，任何部分切片都会被丢弃，额外的空间会分配在切片之前、之后和之间。（即第一个切片之前的间隙、最后一个切片之后的间隙以及切片之间的间隙相等。） 这可能导致空的边框图片侧边区域。
13. 这些图片绘制在与普通边框相同的堆叠级别：紧贴背景层之前。
14. 除非为 border-image-source 指定了 fill，否则不绘制中间图片。

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] 中的 边框冲突解决）。

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

6. 其他效果

注意： 定义背景和边框如何应用于碎片化盒子的 box-decoration-break 属性已被移动到 CSS 碎片化模块。[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> 的组件解释如下

第 1 个 <length>

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

第 2 个 <length>

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

第 3 个 <length [0,∞]>

指定 模糊半径。负值无效。如果模糊值为零，阴影的边缘是锐利的。否则，值越大，阴影边缘越模糊。请参阅下方的 阴影模糊。

第 4 个 <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 /* spread */

box-shadow:
  rgba(0,0,0,0.4)
  10px 10px 0
  10px /* spread */
  inset

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

border-image 不会影响盒阴影（box-shadow）的形状。

6.1.2. 模糊阴影边缘

非零的模糊半径表示生成的阴影应该是模糊的，例如通过高斯滤镜。具体算法未定义；但是，生成的阴影必须近似（每个像素值与其预期值的误差在 5% 以内）于对阴影应用标准差等于模糊半径一半的高斯模糊所产生的图像。

注意：这意味着对于长而直的阴影边缘，模糊半径会产生一个可见的颜色过渡，其长度大约是模糊半径的两倍，且垂直于阴影边缘并以其为中心。该过渡范围从阴影内部端点的几乎完全阴影颜色，延伸到阴影外部端点的几乎完全透明。

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

阴影效果从前到后应用：第一个阴影在最上方，其余的层叠在后面。阴影不影响布局，并且可能与其他盒子和文本或它们的阴影重叠（或被覆盖）。在层叠上下文和绘制顺序方面，元素的外盒阴影绘制在该元素背景的紧下方，而元素的内盒阴影绘制在该元素背景的紧上方（如果有边框和边框图像，则在它们下方）。

除非另有说明，投影仅应用于主盒子。如果受影响的盒子有多个片段，则根据 box-decoration-break 中的规定应用阴影。

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

在边框折叠模型中，外阴影对内部表格元素没有影响。如果为边框折叠模型中具有多种边框厚度的单个边框边缘定义了阴影（例如，在表格的一行边框比其他行厚的情况下应用外阴影，或者在跨行表格单元格应用内阴影，且该单元格相邻的单元格具有不同的边框厚度），则其阴影的确切位置和渲染是不确定的。

7. 级别

本节为信息性内容。 CSS 具有不同级别的功能，每一级别都是另一级别的子集。（完整解释请参阅 [CSS-2017]。）下表描述了本规范中各功能所属的级别。

7.1. 级别 1

• background-color
• background-image 仅支持一张图像（无图层）
• background-repeat: 仅支持 repeat | repeat-x | repeat-y | no-repeat
• background-attachment: 仅支持 scroll | fixed
• background-position: 仅允许一个或两个值
• background 简写：仅支持 color、image、repeat、attachment 和 position
• border-color 属性
• border-style 属性
• border-width 属性
• border-top, border-bottom, border-right, border-left, 和 border 简写

7.2. 级别 2

• background-color
• background-image: 仅支持一张图像（无图层）
• background-repeat: 仅支持 repeat | repeat-x | repeat-y | no-repeat
• background-attachment: 仅支持 scroll | fixed
• background-position: 仅允许一个或两个值
• background: 仅支持 color、image、repeat、attachment 和 position
• border-color 属性
• border-style 属性
• border-width 属性
• border-top, border-bottom, border-right, border-left, 和 border 简写

7.3. 级别 3

• CSS 背景和边框模块级别 3 中描述的所有功能

8. 变更记录

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

• 在 § 2.6.1 background-position 值的序列化 中定义了 background-position 的序列化。（问题 2274）
• 还原了在 background 简写中将 <color> 移动到 <final-bg-layer> 前端的更改。（问题 8496）
• 明确了将边框宽度舍入到设备像素。（问题 7434）
• 明确了 border-radius 与按轴 overflow 长属性之间的交互。（问题 5210）
• 修复了 background-image 计算值行中的错误。（问题 8604）
• 移除了 <box> 定义（用 <visual-box> 引用替换），因为盒子模块现在定义了这些术语。
• 使属性定义表与最新期望对齐，包括“动画类型”和“逻辑属性组”。
• 使用最新的值定义语法简化了属性语法定义。
• 修复了关于盒阴影应用位置的定义。（问题 9286）

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

• 澄清了关于根元素不生成盒子时不传播背景的规则仅适用于 display: none，不适用于 display: contents。（问题 3779）
• 精确定义了 border-width 的 thin、medium 和 thick 的尺寸。（问题 7254）
• 进行了细微的编辑改进。

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

• 反转了 <shadow> 的语法顺序，以匹配浏览器序列化以及 text-shadow 和 drop-shadow()。（问题 2305）

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

• 扩展半径调整仅应用于曲率半径增大而非缩小的阴影和外边距。（问题 1900）

  为了在应用扩展时保持盒子的形状，阴影的圆角半径也会通过添加（或对于内阴影，减去）扩展距离（并以零为下限）从边框盒半径中增加（或减小）。然而，为了在边框半径较小时创建更尖锐的圆角 （从而确保圆角和尖角之间的连续性），当 边框半径 小于 扩展距离 （或对于内阴影，小于负 扩展距离 的绝对值） 时，在计算扩展阴影形状的圆角半径时，将 扩展距离 乘以比例 1 + (r-1)³，其中 r 是边框半径与 扩展距离 的比值。

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

  如果缺少颜色，它默认为 currentColor 所使用的颜色取自 color 属性。

• 清理并规范化了属性定义表中的“动画类型”和“计算值”行。
• 更改语法以使用新的 CSS 括号范围表示法，以反映对负值的叙述限制，并纠正了之前版本中引入的几个语法定义错误。
• 进行了细微的编辑改进。

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

自 2014 年 9 月 9 日候选推荐标准以来，本规范进行了以下（非平凡的）更改：

• 添加了缺少的 box-shadow: none 定义。（显然这太明显了，以至于直到现在才有人注意到它的缺失。）
• 为了序列化，将 <'background-color'> 组件从 <final-bg-layer> 移到了前面，因为一些作者似乎期望这样做，尽管它逻辑上不太合理？
• 从折叠边框的表格中移除了 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）之间创建连续性。这也为所有中间状态提供了更好的结果。
• 添加了关于边距边缘如何根据 border-radius 弯曲的定义。（这与 [CSS-SHAPES] 相关，但不改变对 CSS 背景和边框级别 3 的一致性。）
• 移除了 box-decoration-break；它现在是 [CSS-BREAK-3] 的一部分。
• 收紧了 box-shadow 中扩展（spread）的定义。
• 澄清了 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 节 选择性地将双向（bidi）引起的断行添加到受 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 节：向 border-image-repeat 属性值表中添加了 space 关键字：它之前包含在允许值列表中，但未包含在语法定义中。

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

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

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

• 第 4.3 节：将 border-width 的“百分比”字段标记为不适用，因为它们未包含在属性中。

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

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

• 添加了 background-clip 的 content-box 值。
• 更改了 background-clip 和 background-origin 的 background 简写语法。
• 移除了当 border-radius 产生曲线时使用渐变进行颜色过渡的建议。
• （重）添加了 box-shadow 属性。
• 各种澄清。

9. 致谢

Tapas Roy 在边框模块与背景模块合并之前曾担任其编辑。

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

边框图像属性最初由 fantasai 提出。目前的简化方案（一张图像切成九部分）归功于 Ian Hickson。（虽然最初的想法似乎源自微软的匿名工程师。）

最后，特别感谢 Brad Kemper 对草案中许多功能的反馈和建议，感谢他绘制了所有的盒阴影示例，并为 border-image 属性提出了某些根本性变革，解决了早期定义中的许多问题。

10. 隐私考量

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

11. 安全考量

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