CSS 图像模块级别 4

1. 引言

本节不具有规范性。

本模块介绍了表示 2D 图像的额外方法，例如作为 带有颜色回退的 URL、作为 锥形渐变，或作为 文档中其他元素的渲染结果。

1.1. 值定义

本规范遵循 [CSS2] 中的 CSS 属性定义约定，并使用 [CSS-VALUES-3] 中的 值定义语法。本规范中未定义的值类型在 CSS Values & Units [CSS-VALUES-3] 中定义。与其他 CSS 模块的组合可能会扩展这些值类型的定义。

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

2. 2D 图像值：<image> 类型

<image> 值类型表示一个 2D 图像。它可以是 url 引用、图像标记 或 渐变标记。其语法为

<image> = <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

<image> 可用于许多 CSS 属性，包括 background-image、list-style-image、cursor 属性 [CSS2]（其中它替换了属性值中的 <url> 组件）。

在某些情况下，图像是无效的，例如指向非有效图像格式资源或加载失败的 <url>。无效图像 渲染为没有 固有尺寸 的纯色 透明 图像。然而，无效图像 在某些上下文中会触发错误处理子句。例如，list-style-image 中的 无效图像 被视为 none，从而允许 list-style-type 在其位置渲染。[CSS2]

当图像正在加载时，称为 正在加载的图像。正在加载的图像 不是 无效图像，但表现类似：它们渲染为没有 固有尺寸 的纯色 透明 图像，并且可以在提供回退功能的上下文中触发回退渲染，但不得触发回退资源的加载。或者，如果 正在加载的图像 恰好替换了已经加载的图像（例如由于文档或样式表的更改），并且 UA 正在跟踪此信息，它可能会继续渲染已加载的图像以代替 正在加载的图像。

部分加载的图像（其 固有尺寸 已知，但图像数据尚未完全加载）可以被视为 正在加载的图像，或者被视为渲染了部分数据的已加载图像。例如，UA 可能会在隔行扫描 GIF 的第一遍像素数据加载后，甚至在图像头（包含尺寸数据）被解析后，即刻就地渲染图像，并随着更多数据的加载刷新渲染；或者它可能会等到整张图像加载完成后再使用它。

计算后的 <image> 值是将 指定值 中的所有 <url>、<color> 和 <length> 进行计算后的结果。

2.1. 图像文件格式

当从 <image> 值引用时，对于所有可以使用 <image> 的属性，UA 至少必须支持以下图像文件格式

• PNG，如 [PNG] 中所指定
• SVG，如 [SVG11] 中所指定，使用 安全静态模式（参见 [SVG-INTEGRATION]）
• 如果 UA 支持动画 <image>，则支持 SVG，如 [SVG11] 中所指定，使用 安全动画模式（参见 [SVG-INTEGRATION]）

UA 也可支持其他文件格式。

2.2. 图像引用：url() 标记

注意：与 [css-images-3] 相比无变化。

2.3. 获取外部图像

对于给定的 <url> url 和 CSS 样式声明 declaration，若要 为样式表获取外部图像，则需给定 url 获取样式资源，其中 ruleOrDeclaration 为 declaration，destination 为 "image"，CORS 模式为 "no-cors"，processResponse 为给定 响应 res 和 null、failure 或字节流 byteStream 的以下步骤：如果 byteStream 是字节流，则从字节流中加载图像。

2.4. 分辨率/类型协商：image-set() 标记

为用户设备提供最合适的分辨率图像可能是一项艰巨的任务。理想情况下，图像的分辨率应与查看它们的设备分辨率相同，而这在用户之间可能会有所不同。然而，其他因素也会影响发送哪种图像的决定；例如，如果用户处于缓慢的移动网络连接中，他们可能更倾向于接收低分辨率图像，而不是等待加载大型高分辨率图像。image-set() 函数允许作者忽略大多数此类问题，只需提供图像的多种分辨率，并让 UA 根据具体情况决定哪种最合适。

此解决方案假设分辨率是文件大小的代理，因此无法适当处理矢量图像的多分辨率集，或混合矢量图像与栅格图像（例如用于图标）。例如，对高分辨率使用矢量，对低分辨率使用像素优化的位图，并对低带宽再次使用矢量（因为即使它是更高的分辨率，其体积也小得多）。

image-set() 的语法为

<image-set()> = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ]
                     [ <resolution> || type(<string>) ]?

我们应该添加 "w" 和 "h" 尺寸作为可能性，以匹配 HTML picture 元素的功能。

image-set() 内的每个 <string> 代表一个 <url>。

image-set() 函数不能直接或间接（作为另一个 <image> 类型的参数）嵌套在自身内部。

每个 <image-set-option> 都定义了 image-set() 函数可能代表的图像，由三部分组成

• 图像引用（必需）。这可以是 URL 或 CSS 生成的图像，例如 linear-gradient()。

• 一个 <resolution>（可选）。这用于帮助 UA 决定选择哪个 <image-set-option>。如果图像引用是针对栅格图像的，它还指定了图像的 固有分辨率，覆盖任何可能提供 固有分辨率 的其他数据源。

  如果未指定，则出于选择使用哪个 <image-set-option> 的目的，其行为类似于 1x。它还将图像的 固有分辨率 默认为 1x，但如果有其他数据源提供了 固有分辨率，则必须优先使用该分辨率。

• 一个 type( <string> ) 函数（可选），在 <string> 中指定图像的 MIME 类型。

  如果 <string> 在解析为 有效 MIME 类型字符串 时，要么无效，要么有效但未指定支持的图像格式，则 <image-set-option> 不定义有效选项。（这对 image-set() 函数的有效性没有影响。）

  它对图像本身没有影响；像 url("picture.png") 1x type("image/jpeg") 这样的 <image-set-option> 是有效的，如果被选中，它将显示链接的 PNG 图像，尽管它被声明为 JPEG。

  如果未指定，它对 <image-set-option> 没有影响。

image-set() 函数包含一个或多个 <image-set-option> 的列表，并且必须只选择其中一个来确定它将代表什么图像

1. 首先，从列表中移除所有在 type() 值中指定未知或不支持的 MIME 类型的 <image-set-option>。

2. 其次，从列表中移除所有与列表中先前选项具有相同 <resolution> 的 <image-set-option>。

3. 如果此时没有剩余的 <image-set-option>，则该函数代表一个 无效图像。

4. 最后，在剩余的 <image-set-option> 中，由 UA 自行决定加载哪一个，基于其认为相关的任何标准（例如显示器分辨率、连接速度等）。

5. 然后 image-set() 函数代表所选 <image-set-option> 的 <image>。

UA 可以在页面生命周期内更改它们希望用于给定 image-set() 的 <image-set-option>，如果用于确定选择哪个选项的标准发生了足够显著的变化，以至于在 UA 的评估中值得这样做。

background-image: image-set( "foo.png" 1x,
                             "foo-2x.png" 2x,
                             "foo-print.png" 600dpi );

background-image: image-set( "foo.avif" type("image/avif"),
                             "foo.jpg" type("image/jpeg") );

background-image: image-set( linear-gradient(cornflowerblue, white) 1x,
                             url("detailed-gradient.png") 3x );

2.5. 图像回退与标注：image() 标记

image() 函数允许作者

• 使用 媒体片段 来裁剪图像的一部分

• 使用纯色作为图像

• 当指定的 url 处的图像无法下载或解码时，回退到纯色图像

• 自动遵守图像元数据中指定的图像方向

image() 标记定义为

image() = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-tags> = [ ltr | rtl ]
<image-src> = [ <url> | <string> ]

image() 中使用的 <string> 代表一个 <url>。与 CSS 中的 URL 一样，当计算指定的 image() 值时，相对 URL 会解析为绝对 URL（如 Values & Units [CSS-VALUES-3] 中所述）。

如果图像在其元数据（例如 EXIF）中指定了方向，UA 必须旋转或翻转图像，以根据元数据指定的方式将其正确定向。

2.5.1. 图像回退

如果 image() 中同时指定了 URL 和 <color>，则每当 URL 代表一个 无效图像 或 正在加载的图像 时，image() 函数的渲染就像根本没有指定 URL 一样；它会生成如 § 2.5.3 纯色图像 中指定的纯色图像。

如果仅指定了 URL（没有 <color>）且它代表一个 无效图像 或 正在加载的图像，则 image() 函数代表同样的内容。

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

2.5.2. 图像片段

当 image() 中指定的 URL 代表资源的一部分（例如通过使用 媒体片段标识符）时，该部分会从其上下文中裁剪出来并用作独立图像。

background-image: image('sprites.svg#xywh=40,0,20,20')

为了让作者能够利用 CSS 的向前兼容解析规则为图像切片提供回退，支持 image() 标记的实现必须支持通过 image() 指定的图像的 xywh=#,#,#,# 形式的媒体片段标识符。[MEDIA-FRAGS]

background-image: url('swirl.png'); /* old UAs */
background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */

如果 URL 使用了实现不理解的片段标识符语法，或者认为不适用于该类型的图像，则该 URL 必须被视为代表一个 无效图像。

注意：出于遗留兼容性的原因，此错误处理仅限于 image()，而不存在于 URL 的定义中。

2.5.3. 纯色图像

如果 image() 函数仅通过 <color> 参数指定（没有 URL），则它代表指定颜色的纯色图像，且没有 固有尺寸。

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

2.5.4. 双向敏感图像

在列出任何 <image-src> 之前，作者可以指定图像的方向性，类似于在 HTML 中向元素添加 dir 属性。如果方向性图像在具有相反 direction 的元素上或元素内使用，则图像必须在内联方向上翻转（例如，如果内联方向是 X 轴，则就像被 scaleX(-1) 变换一样）。

注意：在没有此声明的情况下，图像默认根本没有任何方向性，因此不关心周围元素的方向性。

<ul style="list-style-image: image(ltr 'arrow.png');">
  <li dir='ltr'>My bullet is on the left!</li>
  <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
</ul>

⇒ My bullet is on the left!
  !THGIR EHT NO SI TELLUB YM ⇐

2.6. 组合图像：cross-fade() 标记

在图像之间转换时，CSS 需要一种方法来显式引用作为开始和结束图像组合的中间图像。这是通过 cross-fade() 函数实现的，它指示要组合的两个图像以及组合在转换过程中的进度。

注意：作者还可以将 cross-fade() 函数用于许多简单的图像处理，例如用纯色给图像着色，或者通过将图像与径向渐变组合来突出显示页面的特定区域。

cross-fade() 的语法定义为

cross-fade() = cross-fade( <cf-image># )
<cf-image> = [ <image> | <color> ] && <percentage [0,100]>? 

该函数代表通过组合一个或多个图像生成的图像。

<percentage> 代表在与其他图像混合时保留多少图像。该 <percentage> 必须介于 0% 和 100%（含）之间；任何其他值均为无效。

如果省略了任何百分比，则将所有指定的百分比相加并从 100% 中减去，结果向下取整至 0%，然后在计算值时在所有省略百分比的图像之间进行平均分配。

如果提供了 <color>，它代表一个具有“自动”尺寸的纯色图像（它根本不参与结果图像的尺寸调整；详细信息请参阅下文的尺寸调整细节）。

2.6.1. cross-fade() Sizing

由 cross-fade() 表示的图像的尺寸是该函数 <image> 参数尺寸的加权平均值；<color> 参数没有影响。它们的计算方式如下

2.6.2. cross-fade() 绘制

由 cross-fade() 表示的图像是函数输入参数的加权平均值，计算方式如下

2.6.3. 简化复杂的 cross-fade()

根据工作组（WG）决议，定义图像的“相等”概念，并在计算值（computed-value）阶段合并“相同”的图像，将其百分比相加。

根据工作组决议，在计算值阶段通过分配百分比并扁平化来简化直接嵌套的 cross-fade()；cross-fade(A 10%, cross-fade(B 30%, C 70%) 90%) 将变为 cross-fade(A 10%, B 27%, C 63%)。

2.7. 将元素用作图像：element() 记法

element() 函数允许作者将文档中的某个元素作为图像使用。当引用的元素外观发生变化时，图像也会随之改变。例如，这可以用于在幻灯片中创建上一张/下一张幻灯片的实时预览，或者引用 canvas 元素以生成华丽的渐变甚至动画背景。

注意：element() 函数仅复制所引用元素的外观，而非实际内容及其结构。作者应仅将其用于装饰目的，严禁使用 element() 在页面中复制具有重要内容的元素。若需多次使用，请直接将元素的多个副本插入文档中。

element() 的语法如下

element() = element( <id-selector> )

其中 <id-selector> 是一个 ID 选择器 [SELECT]。

我们是否需要引用外部文档中的元素（例如 SVG 绘画服务器）？还是仅使用 url() 就足够了？

此名称与 GCPM 中的一个类似函数存在冲突。这个问题需要通过某种方式解决。

需要能够对元素进行“反射”，无论是作为元素的 background-image 还是作为伪元素。这需要特殊处理以避免触发循环检测。

当我们有 overflow:paged 时，如何寻址视图中的单页？

element() 函数引用其参数所匹配的元素。首先在该部分的 elementSources 映射中查找 ID。如果未找到，则与文档进行匹配。如果匹配到多个元素，函数引用第一个此类元素。

element() 函数所表示的图像可能会根据该元素在文档中是否可见而发生变化

已渲染的元素，其不是被替换元素的后代，且生成了 堆叠上下文

该函数所表示的图像，其 自然尺寸 等于所引用元素的 装饰性边界框（decorated bounding box）

• 对于使用 CSS 渲染模型渲染的元素，装饰性边界框 是包含主体盒（principal box）所有片段的 边框图像区域 的最小轴对齐矩形
• 对于使用 SVG 渲染模型渲染的元素，装饰性边界框由 SVG 定义

注意： 由于图像默认会剪裁其边界之外的任何内容，这意味着超出 装饰性边界框 的装饰（如盒阴影）可能会被剪裁。

图像的构建方式是：将所引用元素及其后代（以它们在文档中的相同尺寸）渲染在无限的 透明 画布之上，其位置使得 装饰性边界框 的边缘与图像的边缘齐平。

为了高效实现，似乎需要元素具备一定程度的堆叠上下文。我们需要完整的堆叠上下文，还是只需要一个伪堆叠上下文？它是否必须在通常情况下就是一个堆叠上下文，还是我们可以在将其渲染到 element() 时将其视为一个堆叠上下文进行渲染？

如果所引用元素或其祖先应用了转换（transform），则在将该元素渲染为图像时必须忽略该转换。[CSS3-TRANSFORMS]

如果所引用元素被拆分跨页显示，则该元素表现为页面内容区域在分页方向上紧密连接，且各页面的边缘与初始包含块的起始边缘对齐。跨行或跨列拆分的元素仅按其 装饰性边界框 进行渲染。

实现可以重用为所引用元素生成的现有位图数据，也可以重新生成该元素的显示以在图像尺寸下实现最大化质量（例如，如果实现检测到所引用元素是 SVG 片段）；在后一种情况下，重新生成过程不得改变图像中引用元素的布局。也就是说，除了光栅化质量外，图像必须与所引用元素看起来完全一致。

作为一个略显愚蠢的例子，p 元素可以在文档的其他地方作为背景被重用

<style>
#src { color: white; background: lime; width: 300px; height: 40px; position: relative; }
#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
</style>
<p id='src'>I’m an ordinary element!</p>
<p id='dst'>I’m using the previous element as my background!</p>

未渲染的元素，但提供了 绘画源（paint source）

该函数表示一个图像，其具有 自然尺寸 和 绘画源 的外观。宿主语言定义了绘画源的尺寸和外观。

例如，element() 函数可以引用 HTML 文档中的 SVG <pattern> 元素

<!DOCTYPE html>
<svg>
  <defs>
    <pattern id='pattern1'>
      <path d='...'>
    </pattern>
  </defs>
</svg>
<p style="background: element(#pattern1)">
  I’m using the pattern as a background!
  If the pattern is changed or animated,
  my background will be updated too!
</p>

HTML 还定义了少量元素（如 canvas、img 和 video）提供绘画源。这意味着 CSS 可以引用一个正在绘制但并未显示在页面上的画布。

<!DOCTYPE html>
<script>
  var canvas = document.querySelector('#animated-bullet');
  canvas.width = 20; canvas.height = 20;
  drawAnimation(canvas);
</script>
<canvas id='animated-bullet' style='display:none'></canvas>
<ul style="list-style-image: element(#animated-bullet);">
  <li>I’m using the canvas as a bullet!</li>
  <li>So am I!</li>
  <li>As the canvas is changed over time with Javascript,
      we’ll all update our bullet image with it!</li>
</ul>

其他任何情况

该函数表示一个 无效图像。

例如，以下所有 element() 的使用都将导致透明背景

<!DOCTYPE html>
<p id='one' style="display:none; position: relative;">one</p>
<iframe src="http://example.com">
  <p id='two' style="position: relative;">I’m fallback content!</p>
</iframe>
<ul>
  <li style="background: element(#one);">
    A display:none element isn’t rendered, and a P element
    doesn’t provide a paint source.
  </li>
  <li style="background: element(#two);">
    The descendants of a replaced element like an IFRAME
    can’t be used in element() either.
  </li>
  <li style="background: element(#three);">
    There’s no element with an id of "three", so this also
    gets rendered as a transparent image.
  </li>
</ul>

如果一个元素没有关联的盒（box），则该元素被视为 未渲染的。例如，如果该元素或其祖先是 display:none，则会发生这种情况。宿主语言可以定义元素被视为未渲染的其他方式；例如，在 SVG 中，<defs> 元素的任何后代都被视为未渲染。

<!DOCTYPE html>
<script>
function navigateSlides() {
  var currentSlide = ...;
  document.querySelector('#prev-slide').id = '';
  document.querySelector('#next-slide').id = '';
  currentSlide.previousElementSibling.id = 'prev-slide';
  currentSlide.nextElementSibling.id = 'next-slide';
}
</script>
<style>
.slide {
  /* Need to be a stacking context to be element()-able. */
  position: relative;
}
#prev-preview, #next-preview {
  position: fixed;
  ...
}
#prev-preview { background: element(#prev-slide); }
#next-preview { background: element(#next-slide); }
</style>
<a id='prev-preview'>Previous Slide</a>
<a id='next-preview'>Next Slide</a>
<section class='slide'>...</section>
<section class='slide current-slide'>...</section>
...

2.7.1. 绘画源（Paint Sources）

宿主语言可以定义某些元素提供 绘画源。绘画源具有固有的外观，并且无需进行布局或渲染即可获得 具体对象尺寸，因此即使在 未渲染 时也可以用作图像。

在 HTML 中，img、video 和 canvas 元素提供绘画源。

在 SVG 中，任何提供 绘画服务器（paint server） 的元素都提供绘画源。注意：在 SVG1.1 中，<linearGradient>、<radialGradient> 和 <pattern> 元素提供绘画源。 它们按照规范描述进行绘制，其坐标系定义如下

objectBoundingBox（对象边界框）

该坐标系的原点位于绘制对象所属的 具体对象尺寸 定义的矩形的左上角，其宽度和高度与 具体对象尺寸 相同。单个 用户坐标 是 具体对象尺寸 的宽度和高度。

userSpaceOnUse（用户空间使用）

该坐标系的原点位于绘制对象所属的 具体对象尺寸 定义的矩形的左上角，其宽度和高度与 具体对象尺寸 相同。用户坐标 的大小与 CSS px 单位等效。

注意： 预计本模块的未来版本将定义引用外部文档中的绘画源的方法，或者定义仅由脚本创建且从未插入文档的绘画源。

2.7.2. 使用文档外源：ElementSources 接口

element() 函数通常选择文档内的元素，但提供 绘画源 的元素不一定非要在文档内。例如，HTML canvas 元素可以在脚本中完全创建、维护和绘制，无需直接插入文档。

只需要有一种引用该元素的方法，因为 ID 选择器无法选择文档外的元素。elementSources Map 对象提供了此功能。

partial namespace CSS {
  [SameObject] readonly attribute any elementSources;
};

elementSources 映射中任何具有字符串键且其值是提供 绘画源 的对象的条目，均可供 element() 函数使用。

每当 element() 使用 <id-selector> 时，首先会在 elementSources 映射中查找该 ID 的值（去除开头的 # 字符）

• 如果找到该 ID，且与其关联的对象提供了 绘画源，则 element() 函数表示该绘画源。
• 如果找到了该 ID，但与其关联的对象不提供 绘画源，则 element() 函数表示一个 无效图像。
• 如果映射中根本找不到该 ID，则会照常在文档中查找。

这种对 ID 选择器的复用符合 Mozilla 的行为。我试图避免在语法开头直接使用 <custom-ident>，因为这会占用过多的语法空间。不过，另一种可能性是以语言定义的关键字后跟 <custom-ident> 开头，例如 element(external fancy) 之类。欢迎提出命名建议。

<script>
var bg = document.createElement('canvas');
bg.height = 200;
bg.width = 1000;
drawFancyBackground(bg);
CSS.elementSources.set('fancy', bg);
</script>
<style>
h1 {
  background-image: element(#fancy);
}
</style>

2.7.3. 循环检测

element() 函数可能会产生毫无意义的循环关系，例如元素将其自身用作背景。然而，通过跟踪依赖图并使用通用的循环检测算法，这些关系可以被轻松且可靠地检测和解决。

依赖图由边组成，其方式如下

• 每个元素依赖于其子元素
• 对于任何使用指向元素 B 的 element() 函数的属性的元素 A，A 依赖于 B
• 如果宿主语言定义了元素引用其他元素渲染的方式，则引用元素依赖于被引用元素。例如，在 SVG 中，<use> 元素依赖于它引用的元素。

如果图中包含循环，则参与循环的任何 element() 函数均为 无效图像。

3. 渐变

渐变是一种从一种颜色平滑过渡到另一种颜色的图像。它们通常用于背景图像、按钮和许多其他事物中的细腻阴影。本节描述的 渐变函数 允许作者以简洁的语法指定此类图像，以便 UA 在渲染页面时自动生成图像。<gradient> 的语法如下

<gradient> = [
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()> |
  <conic-gradient()>  | <repeating-conic-gradient()> ]

渐变被绘制在一个尺寸为 具体对象尺寸 的盒中，称为 渐变盒（gradient box）。然而，渐变本身没有 自然尺寸。

渐变是通过定义 起点 和 终点 来指定的 渐变线（gradient line）（根据渐变类型的不同，技术上可以是线、射线或螺旋线），然后在沿此线的点上指定颜色。这些颜色平滑混合以填充线条的其余部分，然后每种类型的渐变都会定义如何使用 渐变线 的颜色来生成实际的渐变。

3.1. 线性渐变：linear-gradient() 记法

本级别向 linear-gradient() 和 repeating-linear-gradient() 添加了一个 <color-interpolation-method> 参数，指示在渐变线上插值颜色时要使用的色彩空间和路径。参见 CSS 颜色 4 §  12. 颜色插值。

<linear-gradient-syntax> =
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
  <color-stop-list>
<side-or-corner> = [left | right] || [top | bottom]

3.1.1. 色彩空间对插值的影响：示例

本节是非规范性的。

色彩空间对插值的影响可能非常显著。

为渐变插值选择极坐标色彩空间而非矩形色彩空间，如果色标的色相相距较远，可以避免饱和度下降。在极坐标色彩空间中进行插值本质上是保持色度（chroma-preserving）的，尽管中间颜色很容易超出色域；它们随后将被色域映射以带回色域内。

3.2. 径向渐变：radial-gradient() 记法

3.2.1. 添加 <color-interpolation-method>

本级别向 radial-gradient() 和 repeating-radial-gradient() 添加了一个 <color-interpolation-method> 参数，指示在渐变线上插值颜色时要使用的色彩空间和路径。参见 CSS 颜色 4 §  12. 颜色插值。

<radial-gradient-syntax> =
  [ [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] || <color-interpolation-method>]? ,
  <color-stop-list>

3.2.2. 扩展 <radial-size>

本级别扩展了 <radial-size> 选项，包含来自 circle() 和 ellipse() <basic-shape> 值的添加内容

<radial-size> = <radial-extent>{1,2} | <length-percentage [0,∞]>{1,2}

当指定 circle 作为 <radial-shape> 时，双分量值仍然无效，除此之外，它们表示椭圆的水平（第一个）和垂直（第二个）半径。

对于 circle，<percentage> 值是根据 渐变盒 的宽度和高度的“缩放对角线”进行解析的：sqrt(width² + height²)/sqrt(2)。

3.3. 锥形渐变：conic-gradient() 记法

锥形渐变首先指定一个圆心，类似于径向渐变，不同之处在于锥形渐变的色标是放置在圆的圆周周围，而不是放置在从中心发出的线上，这会导致颜色在您围绕中心旋转时平滑过渡，而不是在您从中心向外移动时平滑过渡。

锥形渐变是通过指示旋转角度、渐变中心，然后指定色标列表来指定的。与色标放置是通过指定 <length> 的线性渐变和径向渐变不同，锥形渐变的色标是使用 <angle> 指定的。射线然后从中心发出并指向各个方向，每条射线的颜色等于它们与渐变线相交处的颜色。

注意： 这些渐变被称为“锥形（conic）”或“圆锥状（conical）”，因为如果选择的色标在某一边明显比另一边亮，它会产生看起来像从上方观察到的圆锥的图案。在某些上下文中，它们也被称为“角度”渐变，因为它们是通过改变射线的旋转角度产生的。

此示例直观地说明了 conic-gradient(at 25% 30%, white, black 60%) 将如何绘制。请注意，由于色标位置总是解析为角度，因此 at 25% 30% 的唯一效果是渐变的二维平移，即它不会影响渐变的绘制方式。

3.3.1. conic-gradient() 语法

锥形渐变的语法如下

conic-gradient() = conic-gradient( [ <conic-gradient-syntax> ] )
<conic-gradient-syntax> =
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? ,
  <angular-color-stop-list>

参数定义如下

<angle> | <zero>

整个渐变旋转此角度。如果省略，默认值为 0deg。如果 <angle> 为零，则可以省略单位标识符。

<position>

确定渐变的 渐变中心。<position> 值类型（也用于 background-position）在 [CSS-VALUES-3] 中定义，并使用中心点作为对象区域、渐变盒 作为定位区域进行解析。如果省略此参数，则默认为 center。

通常在锥形渐变中，0deg 处的锐利过渡是不希望出现的，这通常通过确保第一个和最后一个色标是相同的颜色来避免。也许有一个自动实现此功能的关键字会很有用。

是否需要一个用于剪裁渐变的半径（内径和外径）？如果需要，我们也可以在色标位置支持长度值，因为我们现在有了特定的半径。

椭圆锥形渐变有用吗？图形库支持它们吗？

3.3.2. 放置色标

色标放置在围绕 渐变中心 呈圆形弯曲的 渐变线 上，0% 和 100% 的位置均位于 0deg 处。就像线性渐变一样，0deg 指向页面顶部，角度增加对应于绕圆顺时针移动。

注意： 将渐变线视为形成一个螺旋线可能更有帮助，其中仅渲染从 0deg 到 360deg 的部分。当您有渲染区域之外的角度时，这可以避免关于“重叠”的任何混淆。

色标可以放置在 0% 之前或 100% 之后的位置；虽然这些区域不会被直接查询用于渲染，但放置在那里的色标可以通过插值或重复（参见 重复渐变）影响渲染区域内色标的颜色。例如，conic-gradient(red -50%, yellow 150%) 产生的锥形渐变在 0deg 处以红橙色开始（特别是 #f50），并在 360deg 处过渡到橙黄色（特别是 #fa0）。

渐变在任何点的颜色是通过首先找到锚定在渐变中心并穿过给定点的唯一射线来确定的。该点的颜色即为该射线与 渐变线 相交位置处的颜色。

3.3.3. 锥形渐变示例

除非另有说明，以下所有 conic-gradient() 示例均假设应用于一个 300px 宽、200px 高的盒中。

background: conic-gradient(#f06, gold);
background: conic-gradient(at 50% 50%, #f06, gold);
background: conic-gradient(from 0deg, #f06, gold);
background: conic-gradient(from 0deg at center, #f06, gold);
background: conic-gradient(#f06 0%, gold 100%);
background: conic-gradient(#f06 0deg, gold 1turn);

background: conic-gradient(white -50%, black 150%);
background: conic-gradient(white -180deg, black 540deg);
background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%));

background: conic-gradient(from 45deg, white, black, white);
background: conic-gradient(hsl(0,0%,75%), white 45deg, black 225deg, hsl(0,0%,75%));

background: conic-gradient(white 45deg, black 225deg, white 405deg);

background: radial-gradient(closest-side, gray, transparent),
            conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
border-radius: 50%;
width: 200px; height: 200px;

background: radial-gradient(closest-side, gray, transparent),
            conic-gradient(in hsl longer hue, red 0 100%);
transform: scaleX(-1);
border-radius: 50%;
width: 200px; height: 200px;

background: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
border-radius: 50%;
width: 200px; height: 200px;

3.4. 重复渐变：repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 记法

除 linear-gradient()、radial-gradient() 和 conic-gradient() 之外，本规范还定义了 repeating-linear-gradient()、repeating-radial-gradient() 和 repeating-conic-gradient() 值。这些记法采用相同的值，并且其解释方式与前面定义的各自非重复的同类函数相同。

<repeating-conic-gradient()> = repeating-conic-gradient( [ <conic-gradient-syntax> ] )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <radial-gradient-syntax> ] )

background: repeating-conic-gradient(gold, #f06 20deg);

background: repeating-conic-gradient(
                hsla(0,0%,100%,.2) 0deg 15deg,
                hsla(0,0%,100%,0) 0deg 30deg
            ) #0ac;

background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%);
background-size: 60px 60px;

background: conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg);
background-size: 60px 60px;

3.5. 定义渐变颜色

渐变中的颜色是使用 色标（color stops）（<color> 和 渐变线 上的对应位置）和 颜色过渡提示（color transition hints）（两个 色标 之间的位置，表示颜色过渡的中间点）来指定的，这些颜色被放置在 渐变线 上，定义线条上每个点的颜色。（每个 渐变函数 定义了 渐变线 的形状和长度，及其 起点 和 终点；见上文。）

渐变区域内的颜色随后通过将它们绑定到渐变函数指定的 渐变线 上的特定点来确定。UA 可以轻微地“抖动”渐变颜色（随机交替单个像素与渐变线上附近的颜色），以实现更平滑的渐变。

3.5.1. 色标列表

色标 和 过渡提示 在 色标列表（color stop list） 中指定，该列表是由一个或多个 色标 与可选的 过渡提示 交替组成的列表

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?
<linear-color-stop> = <color> <color-stop-length>?
<linear-color-hint> = <length-percentage>
<color-stop-length> = <length-percentage>{1,2}

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?
<angular-color-stop> = <color> <color-stop-angle>?
<angular-color-hint> = <angle-percentage> | <zero>
<color-stop-angle> = [ <angle-percentage> | <zero> ]{1,2}

<color-stop> = <color-stop-length> | <color-stop-angle>

具有两个位置的 色标 等效于指定两个具有相同颜色的 色标，每个位置一个。

注意： 通常，这会导致两个位置之间出现纯色“条纹”，但使用 longer <color-interpolation-method> 反而会在两个位置之间创建“彩虹”。

百分比是根据 起点 和 终点 之间 渐变线 的长度来解析的，0% 位于起点，100% 位于终点。长度沿 渐变线 从 起点 向 终点 方向测量。

色标 和 过渡提示 位置通常放置在 起点 和 终点 之间，但这不是必须的：渐变线在两个方向上无限延伸，并且可以在 渐变线 上的任何位置指定位置。

当省略 色标 的位置时，它会自动分配一个位置。色标列表 中的第一个或最后一个 色标 会被分别分配到 渐变线 的 起点 或 终点。否则，它会被分配到两个相邻色标之间的中间位置。如果连续多个色标缺少位置，它们会在相邻的已定位色标之间等距分布。有关详细信息，请参阅 § 3.5.3 色标“修正”。

3.5.2. 为渐变线上色

在每个 色标 位置，渐变线 为该 色标 的颜色。在第一个 色标 之前，渐变线 为第一个 色标 的颜色；在最后一个 色标 之后，渐变线 为最后一个 色标 的颜色。在每对 色标 之间，渐变线 的颜色在两个 色标 的颜色之间进行插值，插值发生在指定的色彩空间中，缺失分量的处理定义在 CSS 颜色 4 § 12.2 缺失分量的插值 中，色相插值定义在 CSS 颜色 4 § 12.4 色相插值 中，并使用预乘 alpha，定义在 CSS 颜色 4 § 12.3 Alpha 插值 中。如果渐变函数中未指定 <color-interpolation-method>，则用于渐变插值的色彩空间是默认插值色彩空间 Oklab，定义在 [css-color-4] 中。

注意： <color-interpolation-method> 仅影响色标之间的颜色。第一个色标之前和最后一个色标之后的颜色等于第一个/最后一个色标，无论使用何种插值方法。

linear-gradient(in oklch, red, #888, green)

默认情况下，这种插值是线性的——在两个色标距离的 25%、50% 或 75% 处，颜色是两个色标颜色的 25%、50% 或 75% 混合。

但是，如果两个色标之间提供了过渡提示，则插值是非线性的，并由该提示控制。

注意：过渡提示指定了“中间色”（即两个相邻色标颜色 50% 的混合）应放置的位置。当提示正好位于两个相邻色标的中间时，上述插值算法正好产生普通的线性插值。如果提示放置在其他任何位置，它会产生两个相邻色标之间的平滑指数曲线，并且“中间色”正好出现在提示指定的位置。

background: linear-gradient(to right, red 0%, blue 100%);

background: linear-gradient(to right, red 0%, 25%, blue 100%);

如果多个色标具有相同的位置，它们会产生从列表中第一个指定的颜色到最后一个指定的颜色的瞬时过渡。实际上，颜色在该位置会发生突变，而不是平滑过渡。

3.5.3. 色标“修复”

在解析每个色标的使用值位置时，必须按顺序应用以下步骤

1. 如果第一个色标没有位置，将其位置设置为 0%。
2. 如果最后一个色标没有位置，将其位置设置为 100%。
3. 如果某个色标或过渡提示的位置小于列表中它之前的任何色标或过渡提示的指定位置，则将其位置设置为等于列表中它之前的任何色标或过渡提示的最大指定位置。
4. 如果任何色标仍然没有位置，那么对于每一段没有位置的相邻色标，设置它们的位置，使它们在具有位置的前一个和后一个色标之间均匀分布。

应用这些规则后，所有色标和过渡提示都将具有明确的位置和颜色，并且它们将按升序排列。

注意：建议作者在混合使用不同单位（如 px、em 或 %）时要小心，因为这可能会导致色标无意中尝试移动到前面的色标之前。例如，规则 background-image: linear-gradient(yellow 100px, blue 50%) 在背景区域至少有 200px 高时不会触发任何修复。然而，如果它只有 150px 高，蓝色色标的位置将等同于 75px，这在黄色色标之前，并将被校正为 100px。此外，由于此类色标的相对顺序无法在不进行布局的情况下确定，因此它们在动画或过渡中不会平滑插值。

1. linear-gradient(red, white 20%, blue)
   =1=>
   linear-gradient(red 0%, white 20%, blue 100%)

2. linear-gradient(red 40%, white, black, blue)
   =1,3=>
   linear-gradient(red 40%, white 60%, black 80%, blue 100%)

3. linear-gradient(red -50%, white, blue)
   =1,3=>
   linear-gradient(red -50%, white 25%, blue 100%)

4. linear-gradient(red -50px, white, blue)
   =1,3=>
   linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)

5. linear-gradient(red 20px, white 0px, blue 40px)
   =2=>
   linear-gradient(red 20px, white 20px, blue 40px)

6. linear-gradient(red, white -50%, black 150%, blue)
   =1,2=>
   linear-gradient(red 0%, white 0%, black 150%, blue 150%)

7. linear-gradient(red 80px, white 0px, black, blue 100px)
   =2,3=>
   linear-gradient(red 80px, white 80px, black 90px, blue 100px)

4. 一维图像值：<image-1D> 类型和 stripes() 标记法

虽然<image>值代表二维 (2D) 图像，且<color>可以被视为零维 (0D) 图像（在任一轴上都不变化），但某些上下文需要一维 (1D) 图像，它沿着抽象的、无方向的、单轴的绘制线指定颜色。<image-1D> 类型代表此类1D 图像，包括stripes()函数标记法

<image-1D> = <stripes()>
<stripes()> = stripes( <color-stripe># )
<color-stripe> = <color> && [ <length-percentage> | <flex> ]?

stripes() 函数将1D 图像定义为以逗号分隔的彩色条纹列表，每个条纹按给定的顺序首尾相连地放置在绘制线上。

每个<color-stripe>条目定义了一个具有指定<color>和厚度的纯色条纹。如果省略厚度，则默认为 1fr。厚度值的解释如下

<百分比 [0,100]>

百分比厚度是相对于总宽度的。仅 0% 和 100%（含）之间的值有效。

<length [0,∞]>

负长度值无效。

<flex>

<flex> 是作为函数中<flex>条目总和相对于总宽度的分数进行评估的，在减去任何非<flex>条目的厚度之后（减法结果向下取整为零）。如果<flex>值的总和小于 1fr，则减法结果在分布前会乘以总和的值。

总宽度由使用stripes()函数的上下文定义。如果条纹的总和小于总宽度，则绘制线在其剩余长度上为透明黑色，就像给出了最后一个transparent参数一样。如果总和较大，则超出总宽度的任何条纹或部分将被截断。

此函数的计算值是一个有序的条纹列表，每个条纹给出一个计算颜色和一个厚度（表示为<flex>值或计算出的<length-percentage>值）。

5. 在 CSS 中调整图像和对象大小

5.1. 调整对象大小：object-fit 属性

object-fit 属性指定应如何将替换元素的内容拟合到由其使用的高度和宽度所建立的框中。

填充 (fill)

替换的内容被调整大小以填充元素的内容框：对象的具体对象尺寸是元素的使用宽度和高度。

none（无）

替换的内容不会被调整大小以适应元素的内容框：使用默认调整大小算法（未指定尺寸）和等于替换元素使用宽度和高度的默认对象尺寸来确定对象的具体对象尺寸。

contain

替换的内容被调整大小以保持其纵横比，同时适应元素的内容框内：其具体对象尺寸解析为针对元素使用宽度和高度的包含约束。

如果使用 scale-down 标志，则调整内容大小，就像指定了 none 或 contain 一样（以会导致较小的具体对象尺寸的为准）。

注意：none 和 contain 都遵循内容的自然纵横比，因此“较小”的概念定义明确。

cover

替换的内容被调整大小以保持其纵横比，同时填充元素整个内容框：其具体对象尺寸解析为针对元素使用宽度和高度的覆盖约束。

如果使用 scale-down 标志，则调整内容大小，就像指定了 none 或 cover 一样（以会导致较小的具体对象尺寸的为准）。

注意：none 和 cover 都遵循内容的自然纵横比，因此“较小”的概念定义明确。

scale-down

等同于 contain scale-down。

如果内容没有完全填满替换元素的内容框，未填满的空间将显示替换元素的背景。由于替换元素总是将其内容裁切到内容框内，因此内容绝不会溢出。有关相对于内容框定位对象的信息，请参阅 object-position 属性。

注意：object-fit 属性的语义类似于 [SMIL10] 中的 fit 属性，以及 [SVG11] 中 preserveAspectRatio 属性上的 <meetOrSlice> 参数。

注意：根据对象尺寸协商算法，具体对象尺寸（或在本例中为内容尺寸）不会直接缩放对象本身——它仅仅是作为关于可见画布尺寸的信息传递给对象。至于如何在该尺寸内绘制，则取决于图像格式。具体来说，栅格图像总是会缩放到给定的尺寸，而 SVG 则将给定的尺寸用作“SVG 视口”（SVG 定义的术语），然后使用根 <svg> 元素上的多个属性值来确定如何绘制自身。

6. 图像处理

6.1. 覆盖图像分辨率：image-resolution 属性

图像分辨率定义为单位长度内的图像像素数，例如每英寸像素数。某些图像格式可以记录有关图像分辨率的信息。此信息在格式化过程中确定图像的实际尺寸时可能很有帮助。然而，该信息也可能是错误的，在这种情况下应忽略它。默认情况下，CSS 假设分辨率为每个 CSS px 单位对应一个图像像素；但是，image-resolution 属性允许使用其他分辨率。

image-set() 表示法可能会改变图像的自然分辨率，理想情况下，无需设置此属性即可自动应用。我们该如何最好地解决这个问题？将初始值更改为 auto，意味着“1dppx，除非 CSS 另有规定”？或者规定 image-resolution 对分辨率已由 CSS 中其他内容设置的图像没有影响？或者以某种方式润色 image-set()，使其总是产生 1dppx 的图像？

image-resolution 属性指定在元素内部或元素上使用的所有栅格图像的首选分辨率。它既影响内容图像（例如替换元素和生成的内容），也影响装饰性图像（例如 background-image）。图像的首选分辨率用于确定图像的自然尺寸。各值的含义如下

<resolution>

明确指定首选分辨率。在这种情况下，“点”对应于单个图像像素。

from-image

图像的首选分辨率采用图像格式指定的分辨率（自然分辨率）。如果图像未指定其自身的分辨率，则使用明确指定的分辨率（如果已给出），否则默认为 1dppx。

注意：CSS Images 3 § 2.1.2 图像元数据对可以使用哪些元数据施加了一些限制。

snap

如果提供了“snap”关键字，则计算出的 <resolution>（如有）是将指定分辨率舍入到最接近的值，该值会将一个图像像素映射为整数个设备像素。如果分辨率取自图像，则使用的自然分辨率是经过类似调整的图像原始分辨率。

由于 SVG 等矢量格式没有自然分辨率，因此该属性对矢量图像没有影响。

img.high-res {
  image-resolution: 300dpi;
}

img { image-resolution: from-image }

img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }

img { image-resolution: 300dpi }

img { image-resolution: 300dpi snap; }

img { image-resolution: snap from-image; }

7. 插值

本节描述如何在本规范定义的新值类型之间进行插值，以供 CSS 过渡和 CSS 动画等模块使用。

如果下方的算法简单地说明两个值应该“插值”或“过渡”而没有进一步说明，那么该值应该按照过渡规范的描述进行插值。否则，算法可以在其插值的详细说明中引用变量 t。这是一个从 0% 到 100% 的数字，并根据过渡持续时间、经过时间和所使用的计时函数设置为表示过渡进度的值。例如，使用线性计时函数且持续时间为 1 秒时，在 0.3 秒后 t 等于 30%。

7.1. 对 <image> 进行插值

所有图像都可以进行插值，尽管某些特殊类型的图像（如某些渐变）有其自己的特殊插值规则。通常来说，图像的插值方法是将它们缩放到起始图像的大小，并在它们过渡到结束图像的大小时对两者进行交叉淡入淡出。

具体而言，在插值的每个点上，图像等于 cross-fade( (100% - t) start image, end image)。

到/从无图像的特殊情况插值，例如 "background-image: url(foo);" 到 "background-image: none;"。

7.2. 对 cross-fade() 进行插值

cross-fade() 的三个组件是独立插值的。请注意，这可能会导致嵌套的 cross-fade() 表示法。

7.3. 对 <gradient> 进行插值

本节需要审查和改进。特别是，我认为 linear-gradient() 的处理是不完整的——我认为我们想要明确地在起始位置和结束位置之间对渐变线的“长度”（0% 和 100% 之间的距离）进行插值，这样它就不会在单次动画中变大然后变小。

渐变图像可以在 CSS 过渡和动画中直接进行插值，从一个渐变平滑地动画过渡到另一个渐变。允许进行插值的渐变只有少量限制。

1. 起始渐变和结束渐变必须用相同的函数表达。（例如，您可以从 linear-gradient() 过渡到 linear-gradient()，但不能从 linear-gradient() 过渡到 radial-gradient() 或 repeating-linear-gradient()。）

2. 起始渐变和结束渐变必须具有相同数量的 <color-stop>。为此，所有重复渐变都被认为具有无限数量的色标，因此所有重复渐变在这方面都是匹配的。

3. 两个渐变均未使用 <length> 和 <percentage> 色标的组合。

如果这两个渐变满足所有这些约束，它们必须按照下文所述进行插值。如果它们仅未满足第三个约束，则它们必须在 50% 处突然过渡（除非未来规范另有规定）。如果它们未满足前两个约束中的任何一个，则它们必须像通用图像一样使用 cross-fade() 进行插值。

注意：50% 处的突然过渡是为了让内容不依赖于交叉淡入淡出，并且可以在未来为此情况添加更智能的插值规则。

1. 将起始渐变和结束渐变转换为它们的显式形式。

   对于线性渐变：

   • 如果方向指定为 <angle>，则它已处于其显式形式。

   • 否则，将其方向更改为 [0deg, 360deg) 范围内的 <angle>，这将产生等效的渲染。

     如果起始渐变和结束渐变的方向均通过关键字指定，且它们方向映射到的角度之间的绝对差值大于 180 度，则将角度较小的渐变的方向加上 360 度。这确保了从例如“to left”（270度）到“to top”（0度）的过渡会按预期顺时针旋转四分之一圈，而不是逆时针旋转四分之三圈。

   对于径向渐变：

   • 如果尺寸指定为两个 <length> 或 <percentage>，则它已处于其显式形式。

   • 否则，尺寸必须更改为产生等效结束形状的一对 <length>。如果 <radial-shape> 指定为 circle，则将其更改为 ellipse。

2. 分别独立地对渐变的每个组件和色标进行插值。对于线性渐变，唯一的组件是角度。对于径向渐变，组件是中心的水平和垂直位置以及水平和垂直轴长度。

3. 要对色标进行插值，首先将起始渐变中的每个色标与结束渐变中相同索引处的对应色标进行匹配。对于重复渐变，起始和结束渐变中指定的第一个色标被视为位于同一索引，所有其他后续和前导色标也相应地进行索引，并根据需要重复和移动每个渐变的色标列表。然后，对于每一对色标，分别独立地对位置和颜色进行插值。

7.4. 对 stripes() 进行插值

与渐变类似，两个 stripes() 可以进行插值，从而实现从一个图像到另一个图像的平滑动画。允许进行插值的 stripes() 只有少量限制。

1. 起始图像和结束图像必须具有相同数量的 <color-stripe>。

2. 每对插值的厚度必须是相同的类型，即两者必须都是 <length-percentage> 类型，或 <flex> 类型。

如果这两个图像满足这两个约束，它们必须按照下文所述进行插值。如果它们仅未满足第二个约束，则它们必须在 50% 处突然过渡（除非未来规范另有规定）。如果它们未满足第一个约束，则它们必须像通用图像一样使用 cross-fade() 进行插值。

注意：50% 处的突然过渡是为了让内容不依赖于交叉淡入淡出，并且可以在未来为此情况添加更智能的插值规则。

1. 分别独立地对图像的每个组件和条纹进行插值。

2. 要对条纹进行插值，首先将起始图像中的每个条纹与结束图像中相同索引处的对应条纹进行匹配。然后，对于每一对条纹，分别独立地对厚度和颜色进行插值。

8. 序列化

本节描述了本规范中引入的所有新属性和值类型的序列化，目的是与 CSS 对象模型 [CSSOM] 进行对接。

要序列化本模块中定义的任何函数，请按照其单独的语法顺序进行序列化，在不改变含义的情况下尽可能省略组件，用单个空格连接空格分隔的标记，并在每个序列化的逗号后跟一个空格。

对于 cross-fade()，请务必序列化 <percentage>。

Linear-Gradient( to bottom, red 0%,yellow,black 100px)

linear-gradient(rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 0, 0) 100px)

附录 A：已弃用的特性和别名

实现必须接受 -webkit-image-set() 作为 image-set() 的解析时别名。（这是一个有效值，参数与 image-set() 相同，并在解析期间转换为 image-set()。）

9. 隐私考量

注意：与 [css-images-3] 相比无变化。

10. 安全考量

注意：与 [css-images-3] 相比无变化。

11. 变更

自 2023 年 2 月 17 日 工作草案以来的变更

• 清理了样式资源外部 URL 的获取使用方式 (Issue 12065, Issue 12068, Issue 12086, Issue 12147)

• 使 cross-fade() 支持 1 个或多个参数 (Issue 11530)

• 允许角度色标/提示使用 >zero>

• 明确允许渐变旋转使用 >zero>

• 修复了关于双位置制作条纹的说明。添加了关于停止列表之前/之后的颜色的说明。(Issue 11381)

• 将第一个和最后一个停止点的修复分成了单独的步骤，从而更清晰地说明了单个停止点的情况 (Issue 10092)

• 允许仅使用一个色标 (Issue 10092)

• 使 cross-fade() 的顺序与 color-mix() 相同 (Issue 9405)

• 为 stripes() 函数添加了示例图像 (PR 9749)

• 在 radial-gradient(circle) 中添加了 <percentage> 值，并在 radial-gradient(ellipse) 中添加了双 <radial-extent> 值，以使 radial-gradient() 与 circle() 和 ellipse() <basic-shape> 保持一致。(Issue 824)

• 添加了使用中性色进行插值时缺少色调的示例 (Issue 4928)

• 明确链接到 CSS Color 4 色调插值以及缺失组件的处理 (Issue 4928)

• 允许在 image-set() 中省略分辨率/类型

• 应用来自 PR #8021 的修复，应用到 CSS Images 4 中的渐变定义 (Issue 9147)

• 明确了默认插值颜色空间是什么。(Issue 7947)

• 修复了重复的渐变定义 (Issue 8797)

• 添加了重复渐变类型的基本语法 (Issue 8775)

• 修复了 stripes() 在不同类型下的插值 (Issue 8614)

• 添加了 url 请求修饰符以启用请求参数 (PR 8222)

• 指定如果删除了所有选项，image-set() 将是一个无效图像。(Issue 8266)

自 2017 年 4 月 13 日 工作草案以来的变更

• 对 § 3.5 定义渐变颜色 进行了重大的编辑性重写。

• 添加了新的 <image-1D> 数据类型和 stripes() 函数。(Issue 2532)

• 为所有渐变函数添加了 <color-interpolation-method>。（Issue 6094, 6667）

• 添加了新的 object-view-box 属性。(Issue 7058)

• 从 [css-images-3] 中提取了 image-set() 的定义，并

  • 向 image-set() 添加了 type()。(Issue 656)

  • 添加了 -webkit-image-set() 兼容性别名。(Issue 6285)

• 从 [css-images-3] 中提取了 cross-fade() 的定义，并

  • 澄清了 cross-fade() 接受 1 个或多个参数。

  • 更新为允许混合颜色和图像。

  • 详细定义了新函数参数的尺寸和绘制方式。

  • 修复了对 cross-fade() 图像混合的错误定义。

  • 添加了关于计算计划简化和比较的问题。(Issue 2852)

  (会议记录, 变更集)

• 从 [css-images-3] 中提取了图像的 插值 和 序列化。

• 定义了放置在图像数据之后的图像元数据应被忽略，参见 CSS Images 3 § 2.1.2 图像元数据。(Issue 4929)

• 定义了图像加载。(Issue 1984)

  • 从 [css-images-3] 中复制了 正在加载图像 的定义。

  • 将加载和错误处理集成到 image() 的行为中。

  • 明确允许 UA 在新图像加载并替换另一个图像时渲染旧图像。

  • 正确定义了 § 2.3 获取外部图像。(Issue 562, Pull Request 6715)

• 将 CSS 接口更新为命名空间。(Issue 437)

• 允许使用无单位的零来表示 conic-gradient() 中的 <angle> 值。(Issue 1162, 变更)

• 允许将 scale-down 与 object-fit 中的其他值结合使用。(Issue 1578)

• 将缺少的 <element()> 添加到 <image> 数据类型。(issue 5170)

• 修复了 elementSources IDL 定义。

• 修复了要求色标位置必须强制执行的语法错误。(Issue 1334)

• 更新了属性定义表格以

  • 在各模块间对齐“计算值”和“动画类型”行，收紧措辞并修正错误。

  • 在适当的地方使用新的 CSS 括号范围表示法。

  • 删除“媒体”行。

• 将“内在尺寸”重命名为 自然尺寸，以避免与 固有尺寸 混淆。(Issue 4961)

• 复制了来自 [css-images-3] 的计算值 <image> 定义。(Issue 4042)

• 明确允许在渐变中进行抖动。(Issue 4793)

• 各种标记修复、属性语法修正、内联问题、拼写更正、示例修正和改进，以及细微的编辑优化。

• 缩短了模块标题。

自 2012 年 9 月 11 日 工作草案以来的变更

• 添加了 颜色插值提示

• 为渐变色标添加了 双位置语法

• 为 圆锥渐变 添加了起始角度

• 色标的位置现在可以放在颜色之前

• 与 [css-images-3] 相同的文本已被替换为对 [css-images-3] 的引用。

• 添加了 -webkit-image-set() 别名。

自第 3 级以来的变更

• 添加了 image() 表示法（从第 3 级推迟）

• 添加了 image-resolution 属性（从第 3 级推迟）

• 添加了 element() 表示法（从第 3 级推迟）

• 添加了 圆锥渐变

• 向所有渐变函数添加了 <color-interpolation-method>