CSS 图片模块第4级

1. 介绍

本节为非规范性内容。

本模块引入了更多表示二维图像的方法， 例如作为带有颜色回退的 URL、 圆锥渐变， 或文档中其他元素的渲染。

1.1. 值定义

本规范遵循CSS 属性定义约定， 来自[CSS2]，并采用值定义语法， 来自[CSS-VALUES-3]。 本规范未定义的值类型，参见 CSS Values & Units [CSS-VALUES-3]。 与其它 CSS 模块结合使用时，这些值类型的定义可能会被扩展。

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

2. 二维图像值：<image>类型

<image>值类型表示一个二维图像。它可以是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]

图片加载时， 是一个加载中图片。 加载中图片 不是 无效图片， 但行为类似： 渲染为纯色透明图片，且无自然尺寸， 并可能在有回退渲染的上下文中触发回退渲染， 但不能触发回退资源的加载。 或者，如果加载中图片正替换一个已加载的图片 （如文档或样式表变化导致），且用户代理有跟踪此信息， 则可继续渲染已加载图片替换加载中图片。

部分加载的图片（其自然尺寸已知但图片数据未完全加载） 可被视为加载中图片 或作为已加载图片但仅渲染部分数据。 例如，用户代理可以在交错 GIF 的首轮像素数据加载后立刻渲染 或在图片头（包含尺寸信息）解析后立刻渲染，并随着更多数据到来刷新渲染； 或者也可以等整个图片加载完毕再使用。

计算后 <image>值 是指定值，其中所有<url>、<color>及 <length>已被计算。

2.1. 图像文件格式

至少，UA 必须支持下列图片文件格式， 当它们被<image>值引用时， 在所有允许使用<image>的属性中：

• 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 为下列步骤， 给定response 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 的能力。

<string> 在image-set()中代表<url>。

image-set() 函数不能嵌套自身， 无论是直接还是间接 （作为另一个<image>类型的参数）。

每个<image-set-option>都定义了image-set()函数的一个可选图片， 由三部分组成：

• 图片引用（必需）。 可为 URL， 或 CSS 生成图片， 如linear-gradient()。

• <resolution>（可选）。 用于帮助 UA 决定选择哪个<image-set-option>。 若图片引用为位图， 还指定图片的自然分辨率， 覆盖任何其他来源的数据（若有自然分辨率的来源）。

  如未指定， 选择图片时视为1x。 同时自然分辨率也默认为1x， 但如果有其他来源提供自然分辨率， 则必须以该分辨率为准。

• type( <string> ) 函数（可选）， 指定图片的 MIME 类型，参数为<string>。

  如果<string> 解析为有效 MIME 类型字符串时， 要么无效， 要么虽有效但不支持该图片格式， 则该<image-set-option>不是有效选项。 （这不会影响image-set()函数的有效性。）

  它对图片本身无影响； 如<image-set-option>写作 url("picture.png") 1x type("image/jpeg") 也是有效的， 如果被选中仍会显示链接的 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> 的 <image-set-option>。

UA 可以在页面生命周期内更换 <image-set-option>， 如果选择标准发生了足够大的变化（如分辨率切换、网络变化等）。

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 一样， 相对 URL 会在计算 image() 指定值时被解析为绝对 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'); /* 旧 UA */
background-image: image('sprites.png#xywh=10,30,60,20'); /* 新 UA */

如果 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>s 之前， 作者可以为图片指定方向性， 类似于在 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() 尺寸

cross-fade() 所表示图片的尺寸是函数 <image> 参数的尺寸的加权平均； <color> 参数不影响尺寸。 其计算如下：

2.6.2. cross-fade() 绘制

cross-fade() 所表示的图片为各输入参数的加权平均，计算如下：

2.6.3. 简化复杂 cross-fade()

按 WG 决议， 定义图片“相等”的概念， 并在计算值时合并相同图片，百分比求和。

按 WG 决议， 在计算值时简化直接嵌套的 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 paint server）？ 还是说仅用 url() 就足够了？

此名称与 GCPM 中某个类似函数冲突。 需要解决此冲突。

希望能够对元素做“倒影”， 无论是在元素自身的 background-image 还是伪元素中。 这种用法需要特殊处理以避免触发循环检测。

当 overflow:paged 时， 如何定位视图中的单独页面？

element() 函数引用其参数所匹配的元素。 首先在 elementSources 映射中查找 ID， 如该节所述。 若未找到，则在文档中查找。 如果匹配到多个元素，则引用第一个元素。

由 element() 函数表示的图片会根据元素在文档中的可见性有所不同：

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

该函数表示的图片，其 自然尺寸 等于被引用元素的 装饰边界框：

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

注： 因为图片默认会裁剪超出自身边界的内容， 所以超出 装饰边界框 的装饰（如 box-shadow）可能会被裁剪。

图片通过渲染被引用元素及其后代生成（尺寸与文档中一致）， 绘制在无限 透明画布上， 并将 装饰边界框的边与图片边界对齐。

要求元素必须有一定程度的堆叠上下文是为了高效实现。 是否需要完整堆叠上下文，还是伪堆叠上下文即可？ 必须是正常情况下的堆叠上下文，还是渲染为 element() 时临时视为堆叠上下文即可？

如果被引用元素自身或祖先应用了 transform，则渲染为图片时必须忽略 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>

未渲染元素，但能提供 绘制源

函数表示的图片，其 自然尺寸和外观与 绘制源一致。 宿主语言定义绘制源的尺寸和外观。

例如，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 可以引用一个正在绘制但未显示在页面上的 canvas：

<!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);">
    display:none 的元素不会被渲染，且 P 元素
    不提供绘制源。
  </li>
  <li style="background: element(#two);">
    替换元素如 IFRAME 的后代
    也不能在 element() 中被引用。
  </li>
  <li style="background: element(#three);">
    没有 id 为 "three" 的元素，因此也会
    渲染为透明图片。
  </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 {
  /* 需要成为堆叠上下文才能被 element() 使用 */
  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. 绘制源

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

在 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 map 中，任何以字符串为键、值为提供 绘制源 的对象，都可以被 element() 函数引用。

每当 element() 使用 <id-selector> 时， 会先在 elementSources map 中查找该 ID 的值（不含 #）：

• 若找到且值为可用的 绘制源， element() 函数就表示该绘制源。
• 若找到但值不是可用的 绘制源， element() 函数表示 无效图片。
• 若 map 中未找到该 ID，则再在文档中查找。

这样复用 ID 选择器是和 Moz 行为一致的。 不想直接在语法最前面放 <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() 函数可能产生无意义的循环关系， 如元素将自身作为自身背景。 但这种关系可以通过依赖图与常见的循环检测算法轻松可靠地检测和解决。

依赖图的边包括：

• 每个元素依赖其子元素
• 对于属性使用 element() 指向元素 B 的元素 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()> ]

渐变被绘制在 具体对象尺寸 的盒子中， 称为 渐变盒。 但渐变本身没有 自然尺寸。

定义渐变时需要指定 起点 和 终点，以及 渐变线（视渐变类型可能是线、射线或螺旋）， 然后在这条线上指定各点的颜色。 颜色会平滑混合填充整条线， 各类渐变再定义如何利用 渐变线的颜色生成实际渐变。

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

本级为 <color-interpolation-method> 参数 加入 linear-gradient() 和 repeating-linear-gradient()， 用于指定渐变线颜色插值的色彩空间与路径。 参见 CSS Color 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. 色彩空间对插值的影响：示例

本节为非规范性内容。

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

为渐变插值选择极坐标色彩空间（而不是直角坐标空间）， 可避免颜色标之间色相差距大时的去饱和现象。 在极坐标色彩空间插值本质上能保持色度， 但中间颜色容易超出色域， 这时会做色域映射以回到色域内。

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

3.2.1. 新增 <color-interpolation-method>

本级为 <color-interpolation-method> 参数 加入 radial-gradient() 和 repeating-radial-gradient()， 用于指定渐变线颜色插值的色彩空间与路径。 参见 CSS Color 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-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> 和其在渐变线上的位置）以及 颜色过渡提示（即两个 色标之间代表过渡中点的位置） 指定，它们放置在 渐变线上，定义线上的每个点的颜色。 （每个 渐变函数 都定义了 渐变线的形状和长度， 以及其 起点和 终点；见上文。）

渐变区域的颜色会由渐变函数指定的方式， 与 渐变线上的具体点关联起来。 UA 可以对渐变颜色做轻微抖动（随机将像素用相邻渐变线上的颜色交替渲染），以获得更平滑的渐变。

3.5.1. 色标列表

色标和 过渡提示 通过 色标列表 指定， 即一个包含一个或多个 色标，中间可插入可选的 过渡提示 的列表：

<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 Color 4 § 12.2 缺失分量插值， 色相插值见CSS Color 4 § 12.4 色相插值， 使用预乘 alpha，见CSS Color 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， 那么 blue色标位置等价于75px， 这会在 yellow色标之前， 并会被修正为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> 类型即表示此类一维图片， 包括 stripes() 函数记法：

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

stripes() 函数将一维图片定义为一个用逗号分隔的彩色条带列表， 每个条带按顺序首尾相接地排列在绘制线上。

每个 <color-stripe> 项定义了一个指定<color>和厚度的纯色条带。 若省略厚度，则默认为 1fr。 厚度值的解释如下：

<percentage [0,100]>

百分比厚度相对于 total width，仅允许 0% 到 100%（含）。

<length [0,∞]>

负长度值无效。

<flex>

<flex> 作为 total width 的一部分进行分配，分配比例为函数中所有 <flex> 项的总和， 先减去所有非 <flex> 项的厚度后（减法结果若小于 0 则取 0）。 如果 <flex> 值之和小于 1fr， 则剩余空间会乘以总和后再分配。

total width 由 stripes() 函数的使用场景决定。 如果所有条带之和小于 total width， 剩余的 绘制线部分为透明黑，等价于最后有个 transparent 参数。 若总和大于 total width，则超出的条带或部分会被截断。

该函数的计算值为条带的有序列表， 每一项为计算色和厚度，厚度类型为<flex> 或计算后的<length-percentage>。

5. CSS 中图片与对象的尺寸控制

5.1. 对象尺寸控制：object-fit 属性

object-fit 属性指定替换元素内容如何适配其已用高度与宽度所建立的盒子。

fill

替换内容被拉伸以填满元素的内容盒： 对象的具体对象尺寸等于元素的已用宽高。

none

替换内容不会缩放以适应元素的内容盒： 对象的具体对象尺寸通过默认尺寸算法计算（无指定尺寸）， 且默认对象尺寸等于该替换元素的已用宽高。

contain

替换内容缩放时保持宽高比，同时适应元素内容盒： 它的具体对象尺寸会作为contain 约束，以元素的已用宽高为参考计算。

如果使用 scale-down 标志，则内容尺寸采用 none 或 contain， 取其中更小的具体对象尺寸。

注： none 和 contain 都会尊重内容的自然宽高比， 因此“更小”是有定义的。

cover

替换内容缩放时保持宽高比，同时填满整个元素内容盒： 它的具体对象尺寸会作为cover 约束，以元素的已用宽高为参考计算。

如果使用 scale-down 标志，则内容尺寸采用 none 或 cover， 取其中更小的具体对象尺寸。

注： none 和 cover 都会尊重内容的自然宽高比， 因此“更小”是有定义的。

scale-down

等价于 contain scale-down。

如果内容没有完全填满替换元素的内容盒，未填满的区域会显示替换元素的背景。 由于替换元素总是将其内容裁剪到内容盒内，所以内容绝不会溢出。 关于如何在内容盒内定位对象，请参见 object-position 属性。

注： object-fit 属性与 [SMIL10] 中的 fit 属性、 以及 preserveAspectRatio 属性（[SVG11]）上的 <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 过渡（Transitions）和动画（Animations）等模块使用。

如果下列算法仅说明两个值应“插值”或“过渡”，未给出细节， 则应按 Transitions 规范描述的方式插值。 否则，算法可能在详细描述中引用变量 t。 该变量从 0% 到 100%， 表示过渡进度， 其值由过渡持续时间、已过时间和所用时间函数确定。 例如，线性时间函数，持续 1s 时， 经过 0.3s，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>，保证渲染等价。

     若起止渐变都用关键字指定方向， 且两方向对应的角度差大于 180deg， 则给角度较小的渐变方向加 360deg。这样可确保从 "to left" (270deg) 到 "to top" (0deg) 是顺时针转 1/4 圈， 而不是逆时针转 3/4 圈。

   径向渐变：

   • 若 size 已用两个<length>或<percentage>指定， 则已为显式形式。

   • 否则，size 必须转换为两个<length>， 使其与原终止形状等价。 若 <radial-shape> 指定为 circle， 则改为 ellipse。

2. 各分量和色标独立插值。 线性渐变分量只有角度。 径向渐变分量有中心的水平、垂直坐标和主轴/副轴长度。

3. 插值色标时， 先将起始和结束渐变的每个色标一一配对（索引相同）。 对于重复渐变， 起始和结束渐变的第一个指定色标视为同一索引， 其余色标按顺序配对，多余部分循环和移位。 然后对每对色标分别插值位置和颜色。

7.4. stripes() 的插值 stripes()

类似渐变， 两个 stripes() 可以插值， 允许两张图片之间平滑动画。 stripes() 插值仅有如下限制：

1. 起始和结束图片的 <color-stripe> 数量必须一致。

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

如两个图片满足这两条，则按下述方式插值。 若仅第二条不满足，则在 50% 时突变（除非未来规范另有说明）。 若第一条不满足，则用 cross-fade()（通用图片插值方式）。

注： 50% 突变是为了避免依赖交叉淡入淡出， 未来可为此情况增加更智能的插值规则。

1. 各分量和条带独立插值。

2. 插值条带时， 先将起始图片的每个条带与结束图片同索引条带配对， 然后每对条带分别插值厚度和颜色。

8. 序列化

本节描述了本规范引入的所有新属性和值类型的序列化方法， 以便与 CSS 对象模型 [CSSOM] 交互。

序列化本模块定义的任意函数时， 按其语法顺序序列化， 能省略的部分省略（不改变含义）， 空格分隔的 token 用单空格连接， 每个序列化逗号后跟一个空格。

对于 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>。 (Issues 6094，6667)

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

• 将 image-set() 的定义从 [css-images-3] 中移出并：

  • 为 type() 添加到 image-set()。 (Issue 656)

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

• 将 cross-fade() 的定义从 [css-images-3] 中移出并：

  • 明确 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)

• 允许无单位零作为 <angle> 在 conic-gradient() 的取值。 (Issue 1162，变更)

• 允许 scale-down 可与 object-fit 的其他值组合。 (Issue 1578)

• 为 <element()> 增补到 <image> 数据类型。 (issue 5170)

• 修正了 elementSources IDL 定义。

• 修正了必须指定色标位置的语法错误。 (Issue 1334)

• 更新了属性定义表：

  • 统一了“计算值”和“动画类型”行，优化措辞并修正错误。

  • 在合适位置使用了新的 CSS 括号区间记法。

  • 移除了“Media”行。

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

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

• 明确允许渐变抖动（dithering）。 (Issue 4793)

• 杂项标记修复、属性语法更正、内联问题、拼写修正、示例修正及改进，以及编辑微调。

• 缩短了模块标题。

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

• 增加了色彩插值提示

• 增加了用于渐变色标的双位置语法

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

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

• 与 [css-images-3] 完全相同的内容已被替换为对 [css-images-3] 的引用。

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

Level 3 以来的变更

• 增加了 image() 记法（从 Level 3 延期）

• 增加了 image-resolution 属性（从 Level 3 延期）

• 增加了 element() 记法（从 Level 3 延期）

• 增加了圆锥渐变

• 所有渐变函数都增加了 <color-interpolation-method>