CSS 图像模块第4级

1. 简介

本节不具有规范性。

本模块引入了表示二维图像的其他方式， 例如作为 具有颜色回退的URL， 作为 锥形渐变， 或作为 文档中另一个元素的渲染。

1.1. 值定义

本规范遵循 CSS属性定义惯例，来自 [CSS2]，并使用 值定义语法，来自 [CSS-VALUES-3]。 本规范未定义的值类型将在CSS值和单位模块中定义 [CSS-VALUES-3]。 与其他CSS模块的组合可能会扩展这些值类型的定义。

除了定义中特定于属性的值之外， 本规范中定义的所有属性 还接受 CSS-wide关键词 作为其属性值。 为了可读性，它们没有被明确重复。

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 中的 无效图像 被视为 无， 允许 list-style-type 在其位置呈现。 [CSS2]

当图像正在加载时， 它是一个 加载中的图像。加载中的图像 不是 无效图像， 但具有类似的行为： 它们被渲染为一个没有 透明 图像的自然尺寸， 并且在提供回退呈现的上下文中可能触发回退呈现， 但不得触发回退资源的加载。 或者，如果 加载中的图像 恰好替换了 已加载的图像 (例如由于文档或样式表的更改) 并且UA正在跟踪此信息， 它可以继续渲染已加载的图像来代替 加载中的图像。

部分加载的图像（其 自然尺寸 已知，但图像数据尚未完全加载） 可以被视为 加载中的图像 或作为带有部分数据的已加载图像处理。 例如，UA可以在加载第一个像素数据传递后立即呈现交错的GIF， 甚至在图像头（其中包含尺寸数据）解析后， 并在加载更多数据时刷新渲染； 或者它可能会等待整个图像加载完成后再使用它。

计算 <image> 值 是 指定值，其中包含任何 <url>s, <color>s, 以及 <length>s 的计算值。

2.1. 图像文件格式

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

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

UA还可以支持其他文件格式。

2.2. 图像引用： url() 表示法

注意： 与 [css-images-3] 无异。

2.3. 获取外部图像

为了 为样式表获取外部图像， 给定一个 url url 和 CSSStyleSheet 样式表，获取样式资源给定 url， 使用样式表 CSSStyleSheet， 目标为“image”， CORS模式为“no-cors”， 并按以下步骤处理响应 response res 和 null，失败或字节流 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>。 如果图像引用是光栅图像， 它还指定了图像的 自然分辨率， 覆盖任何其他可能提供 自然分辨率 的数据源。

  如果未指定， 它在选择使用哪个 <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. 首先，从列表中移除任何 <image-set-option> 指定了未知或不支持的MIME类型的 type() 值。

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

3. 最后，在剩余的 <image-set-option> 之中， 根据UA认为相关的任何标准 （例如显示器的分辨率， 连接速度， 等等）做出UA特定的选择。

4. 然后，image-set() 函数表示所选的 <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> ]

在 <string> 中使用的 image() 表示一个 <url>。 对于CSS中的URL来说， 相对URL被解析为绝对URL （如值与单位中所述 [CSS-VALUES-3]） 当指定的 image() 值被计算时。

如果图像在其元数据中指定了方向， 例如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() 表示法的实现 必须 支持媒体片段标识符的 xywh=#,#,#,# 形式 用于通过 image() 指定的图像。[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> 之前， 作者可以为图像指定方向性， 类似于在HTML元素中添加 dir 属性。 如果定向图像在具有相反 方向 的元素上使用， 必须在内联方向上翻转图像 （好像通过 scaleX(-1) 进行转换一样，如果内联方向是X轴）。

注意： 如果没有此声明， 图像默认没有方向性， 因此不关心周围元素的方向性。

<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> = <percentage [0,100]>? && [ <image> | <color> ]

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

<percentage> 表示在与其他图像混合时保留的每个图像的百分比。 <percentage> 必须在 0% 和 100% 之间； 任何其他值都是无效的。

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

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

2.6.1. cross-fade() 尺寸调整

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

2.6.2. cross-fade() 绘制

由 cross-fade() 表示的图像是输入参数的加权平均， 按如下步骤计算：

2.7. 使用元素作为图像：element() 表示法

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

注意： element() 函数仅复制引用元素的外观， 而非其实际内容和结构。 作者应仅将此功能用于装饰性目的， 并且不得使用 element() 在页面中复制作为重要内容的元素。 相反，只需在文档中插入元素的多个副本。

element() 的语法为：

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

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

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

该名称与 GCPM 中的一个类似功能冲突。 这需要以某种方式解决。

希望能够为一个元素创建“反射”， 无论是在该元素的背景图片上还是在伪元素中。 这需要特别处理，以避免触发循环检测。

当我们有 overflow:paged 时， 如何引用视图中的单个页面？

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

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

一个 渲染的元素， 不是替换元素的后代， 并生成 堆叠上下文

该函数表示图像，其 自然大小 等于引用元素的 装饰边界框：

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

注意： 因为图像默认会裁剪其边界之外的任何内容， 这意味着扩展到 装饰边界框 之外的装饰， 如框阴影， 可能会被裁剪。

该图像通过渲染引用的元素及其后代 （与它们在文档中的大小相同） 在无限的 透明 画布上构建， 位置使 装饰边界框 的边缘与图像的边缘齐平。

要求元素上存在某种程度的堆叠上下文似乎是实现效率的必要条件。 我们需要完整的堆叠上下文，还是只需要伪堆叠上下文？ 它是否需要通常是堆叠上下文， 还是我们可以仅在渲染到 element() 时将其作为堆叠上下文渲染？

如果引用的元素或其祖先应用了变换， 则在将元素渲染为图像时必须忽略该变换。[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'>我是一个普通的元素！</p>
<p id='dst'>我在使用上一个元素作为我的背景！</p>

一个 未渲染的元素， 但它提供了一个 绘画源

函数表示图像，其 自然尺寸 和外观为 绘画源。 主机语言定义了绘画源的大小和外观。

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

<!DOCTYPE html>
<svg>
<defs>
<pattern id='pattern1'>
  <path d='...'>
</pattern>
</defs>
</svg>
<p style="background: element(#pattern1)">
我在使用图案作为背景！
如果图案被更改或动画化，
我的背景也会随之更新！
</p>

HTML 还定义了一些元素， 例如 canvas、 img、 和 video， 提供了一个绘画源。 这意味着 CSS 例如可以引用一个正在绘制的 canvas， 但该 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>我在使用 canvas 作为项目符号！</li>
<li>我也是！</li>
<li>当 JavaScript 随时间更改 canvas 时，
  我们都会随之更新我们的项目符号图像！</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;">我是回退内容！</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>

如果元素没有关联的框，则该元素被定义为未渲染。 例如，当元素或其祖先设置为 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'>上一个幻灯片</a>
<a id='next-preview'>下一个幻灯片</a>
<section class='slide'>...</section>
<section class='slide current-slide'>...</section>
...

2.7.1. 绘画源

主机语言可以定义一些元素提供绘画源。 绘画源具有固有的外观，并且可以在不进行布局或渲染的情况下获得具体对象大小， 因此即使它们未渲染，也可以用作图像。

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

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

objectBoundingBox

坐标系统的原点位于 具体对象大小定义的矩形的左上角， 它与 具体对象大小的宽度和高度相同。 单个用户坐标是 具体对象大小的宽度和高度。

userSpaceOnUse

坐标系统的原点位于 具体对象大小定义的矩形的左上角， 它与 具体对象大小的宽度和高度相同。用户坐标与 CSS px 单位等价。

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

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

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

只需要一种引用元素的方式， 因为ID选择器不能选择文档外的元素。 elementSources 映射对象提供了这种方式。

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

任何在elementSources 映射中的条目，其字符串键和值是提供 绘画源的对象，都可用于 element() 函数。

每当 element() 使用 <id-selector> 时， ID 的值（不带前缀 # 字符）首先会在 elementSources 映射中查找：

• 如果找到， 并且与之关联的对象提供了 绘画源， 则 element() 函数表示该绘画源。
• 如果找到， 但与之关联的对象不提供 绘画源， 则 element() 函数表示一个 无效图像。
• 如果映射中找不到该 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. 渐变

渐变是一种从一种颜色平滑过渡到另一种颜色的图像。 这些通常用于背景图像、按钮等的细微阴影。 本节描述的 渐变函数 允许作者以简洁的语法指定此类图像， 以便用户代理在渲染页面时自动生成图像。 <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() = linear-gradient(
[ [ <angle> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
<color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]

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

本节为非规范性内容。

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

选择极坐标颜色空间，而不是矩形颜色空间来进行渐变插值时， 可以避免颜色停靠点之间色调相距较远时的去饱和现象。 在极坐标颜色空间中插值具有天然的色度保持特性， 尽管中间颜色可能容易超出色域； 它们将被映射回色域以内。

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

本级别为<color-interpolation-method>参数 添加到了radial-gradient()和repeating-radial-gradient()， 以指示在渐变线上进行颜色插值时使用的颜色空间和路径。 参见 CSS Color 4 §  12. Color Interpolation。

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

3.3. 圆锥渐变：conic-gradient() 表示法

圆锥渐变从指定圆的中心开始，类似于径向渐变， 但圆锥渐变的颜色停靠点放置在圆周周围， 而不是从中心发出的线条上， 这使得颜色在围绕中心旋转时逐渐过渡， 而不是从中心向外渐变。

圆锥渐变通过指定旋转角度、渐变的中心， 然后指定颜色停靠点列表来定义。 与线性和径向渐变不同， 它们的颜色停靠点是通过指定<长度>， 圆锥渐变的颜色停靠点通过指定<角度>来定义。 然后从中心画出指向各个方向的光线， 每条光线的颜色等于其与渐变线相交处的颜色。

注意：这些渐变称为“圆锥”或“圆锥形”渐变， 因为如果颜色停靠点在一侧明显比另一侧亮， 它会呈现出类似从上方观察圆锥的图案。 它们在某些上下文中也被称为“角度”渐变， 因为它们是通过改变光线的旋转角度产生的。

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

3.3.1. conic-gradient() 语法

圆锥渐变的语法为：

conic-gradient() = conic-gradient(
  [ [ [ from <角度> ]? [ at <位置> ]? ] || <颜色插值方法> ]? ,
  <角度颜色停靠点列表>
)

参数定义如下：

<角度>

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

<位置>

确定渐变的渐变中心。 <位置> 类型（也用于 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(gray, transparent),
            conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
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() 值。 这些表示法与其前面定义的非重复兄弟项接受相同的值并以相同方式解释。

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. 定义渐变颜色

渐变中的颜色通过 颜色停靠点（<颜色> 以及 渐变线 上的对应位置来指定） 和 颜色过渡提示（表示颜色过渡中点的两个 颜色停靠点之间的位置） 这些都放置在 渐变线 上， 从而定义线上的每个点的颜色。 （每个 渐变函数 定义了 渐变线 的形状和长度， 以及其 起始点 和 结束点； 见上文。）

然后，整个渐变区域的颜色 通过将其与 渐变线 上的特定点联系起来，如渐变函数所定义。 UA 可以稍微“抖动”渐变颜色 （在渐变线上的附近颜色之间随机交替单个像素） 以实现更平滑的渐变效果。

3.5.1. 颜色停靠点列表

颜色停靠点 和 过渡提示通过 颜色停靠点列表 指定， 它是两个或多个 颜色停靠点 与可选的 过渡提示交替组成的列表：

<颜色停靠点列表> =
  <线性颜色停靠点> , [ <线性颜色提示>? , <线性颜色停靠点> ]#
<线性颜色停靠点> = <颜色> && <颜色停靠点长度>?
<线性颜色提示> = <长度百分比>
<颜色停靠点长度> = <长度百分比>{1,2}

<角度颜色停靠点列表> =
  <角度颜色停靠点> , [ <角度颜色提示>? , <角度颜色停靠点> ]#
<角度颜色停靠点> = <颜色> && <颜色停靠点角度>?
<角度颜色提示> = <角度百分比>
<颜色停靠点角度> = <角度百分比>{1,2}

<颜色停靠点> = <颜色停靠点长度> | <颜色停靠点角度>

具有两个位置的颜色停靠点相当于指定两个具有相同颜色的颜色停靠点，每个位置一个。指定两个位置可以更轻松地在渐变中创建纯色“条纹”，而无需重复两次颜色。

百分比值是相对于渐变线的长度来解析的，起始点为0%，结束点为100%。长度是沿着渐变线从起始点朝向结束点的方向测量的。

颜色停靠点和过渡提示的位置通常位于起始点和结束点之间，但这不是必须的：渐变线在两个方向上无限延伸，位置可以在渐变线上的任何地方指定。

当省略颜色停靠点的位置时，它会自动分配一个位置。颜色停靠点列表中的第一个或最后一个颜色停靠点将分别分配到渐变线的起始点或结束点。否则，它将被分配到两个相邻停靠点之间的中间位置。如果连续多个停靠点没有指定位置，它们将在相邻的已定位停靠点之间均匀分布。详情请参见§ 3.5.3 颜色停靠点“修复”。

3.5.2. 渐变线的着色

在每个 颜色停止点 的位置， 渐变线的颜色 是 颜色停止点的颜色。 在第一个 颜色停止点 之前， 渐变线的颜色 是第一个 颜色停止点 的颜色， 在最后一个 颜色停止点 之后， 渐变线的颜色是最后一个 颜色停止点 的颜色。 在两个 颜色停止点 之间， 渐变线 的颜色将在这两个 颜色停止点 的颜色之间插值， 插值是在指定的颜色空间中进行的，使用预乘的 alpha 值， 如 CSS Color 4 § 12.3 Interpolating with Alpha 中定义。 如果渐变函数中没有指定 <color-interpolation-method>， 渐变插值使用的颜色空间是 [css-color-4] 中定义的默认插值颜色空间。

默认情况下， 这种插值是线性的——在两个 颜色停止点 的距离的 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%。 如果最后一个 颜色停止点 没有位置， 则将其位置设置为 100%。
2. 如果一个 颜色停止点 或 过渡提示 的位置 小于其之前任意 颜色停止点 或 过渡提示 的指定位置， 则将其位置设置为之前任意 颜色停止点 或 过渡提示 的最大指定位置。
3. 如果任何 颜色停止点 仍然没有位置， 则对于每组相邻的 颜色停止点 没有位置的， 将它们的距离均匀分配在有位置的前一个和后一个 颜色停止点 之间。

应用这些规则后， 所有 颜色停止点 和 过渡提示 都将有一个确定的位置和颜色， 并且它们将按升序排列。

注意： 建议作者在混合不同类型的单位时小心， 例如 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. 1D 图像值：<image-1D> 类型和 stripes() 表示法

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

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

stripes() 函数将 1D 图像 定义为用逗号分隔的彩色条纹列表， 每个条纹按顺序依次放置在 绘制线 上。

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

<percentage [0,100]>

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

<length [0,∞]>

负长度值是无效的。

<flex>

<flex> 是相对于函数中 <flex> 条目的总和相对于 总宽度 的一部分计算的， 在减去任何非 <flex> 条目的厚度后（向下取零）。如果 <flex> 值的总和小于 1fr，则减法结果将乘以总和的值，然后分配。

在使用 stripes() 函数的上下文中定义了 total width。如果条纹的总和小于 total width，则剩余长度的 绘制线条 为 透明黑色，就像给出了一个最终的 透明 参数一样。如果总和大于 total width，超出 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 属性的语义类似于 fit 属性在 [SMIL10] 中的含义，以及 <meetOrSlice> 参数在 preserveAspectRatio 属性 中的含义，在 [SVG11] 中。

注意: 根据 对象大小协商 算法，具体对象大小（或在这种情况下，内容的大小）不会直接缩放对象本身——它只是作为有关可见画布大小的信息传递给对象。然后如何在该大小内绘制取决于图像格式。特别是，栅格图像总是缩放到给定的大小，而 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>

所有图像都可以进行插值，尽管某些特殊类型的图像（如某些渐变）有其自己的特殊插值规则。一般来说，图像通过将它们缩放到 start image 的大小，并在转换到 end 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）的过渡按照预期顺时针旋转四分之一圈，而不是逆时针旋转四分之三圈。

   对于径向渐变：

   • 如果大小是通过两个 <length> 或 <percentage> 指定的，则它已经是明确形式。

   • 否则，必须将大小更改为一对 <length>，以产生等效的结束形状。如果 <rg-ending-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. 变更

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

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

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

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

• 添加了新的 object-view-box 属性。（问题 7058）

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

  • 为 type() 添加了 image-set()。（问题 656）

  • 添加了 -webkit-image-set() 兼容性别名。（问题 6285）

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

  • 澄清了 cross-fade() 需要 1 个或更多参数。

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

  • 详细定义了新函数参数的大小和绘制。

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

  • 为计划的简化和比较添加了有关计算的问题。（问题 2852）

  （会议记录，变更集）

• 从 插值 和 序列化 中提取了图像定义，来源于 [css-images-3]。

• 定义了图像元数据放置在图像数据之后应被忽略，参见 CSS Images 3 § 2.1.2 图像元数据。（问题 4929）

• 定义了图像加载。（问题 1984）

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

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

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

  • 正确定义了 § 2.3 获取外部图像。（问题 562，请求 6715）

• 更新了 CSS 接口到命名空间。（问题 437）

• 允许无单位零表示 <angle> 值，应用于 conic-gradient()。（问题 1162，变更）

• 允许将 scale-down 与 object-fit 中的其他值组合。（问题 1578）

• 添加了缺失的 <element()> 到 <image> 数据类型。（问题 5170）

• 修复了 elementSources IDL 定义。

• 修复了语法错误，要求颜色停止位置为必填项。（问题 1334）

• 更新了属性定义表格：

  • 对模块中的“计算值”和“动画类型”行进行了对齐，简化了措辞并纠正了错误。

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

  • 删除了“媒体”行。

• 将“固有尺寸”重命名为 自然尺寸 以避免与 固有尺寸 混淆。（问题 4961）

• 从 [css-images-3] 复制了计算后的 <image> 定义。（问题 4042）

• 明确允许渐变中的抖动。（问题 4793）

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

• 缩短了模块标题。

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

• 添加了 颜色插值提示

• 为渐变颜色停止点添加了双位置语法

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

• 颜色停止点的位置现在可以出现在颜色之前

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

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

自第 3 级以来的变更

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

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

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

• 添加了圆锥渐变

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