在现代浏览器中使用无前缀的 CSS3 渐变

HTML5 和 CSS3 等 Web 标准在不断变化。其中一项最显著的变化是 W3C CSS 渐变候选推荐标准，它允许开发人员为 Internet Explorer 10 等现代浏览器编写代码，而无需使用 厂商前缀。在本文中，我将带您了解新旧语法和行为之间的一些差异，并对这些变化提供一些见解。希望这能为您支持多种浏览器节省一些时间。

注意：IE10 仍然支持 W3C 2011 年 2 月 17 日工作草案中 较旧的 CSS 渐变语法，其使用 -ms- 前缀，因此您现有的代码不会中断。

主要变化

如果您选择将厂商前缀的 CSS3 渐变简化为无前缀的 CSS3 渐变，则需要注意一些主要的语法更改。许多渐变生成器都提供了跨浏览器标记，包括无前缀渐变标记。在许多情况下，根据涵盖渐变的 CSS 图像值 W3C 候选推荐标准，无前缀标记不再有效。以下是您应该注意的变化。

线性渐变和重复线性渐变

	工作草案	候选推荐
方向关键字	top、bottom、left 和 right 关键字通过渐变线的起点描述其方向。	介词 "to" 放在 top、bottom、left 和 right 关键字之前，通过渐变线的终点描述其方向。
示例	-ms-linear-gradient(top, orange, black);	linear-gradient(to bottom, orange, black);
角落计算	角落关键字指定一条从该角落到对角的渐变线。	角落关键字前面带有 "to"，并指定一条从指定象限开始并终止于相对象限的渐变线。渐变线的中心点与连接另外两个角落的线相交。
示例	-ms-linear-gradient(top left, fuchsia, yellow);	linear-gradient(to bottom right, fuchsia, yellow);
角度方向	0deg 是指向右侧的渐变线。角度沿逆时针方向增加。	0deg 是指向顶部的渐变线。角度沿顺时针方向增加。可以使用公式 new = abs(old−450) mod 360 将旧角度转换为新角度。
示例	-ms-linear-gradient(200deg, lime, magenta);,	linear-gradient(250deg, lime, magenta);

径向渐变和重复径向渐变

	工作草案	候选推荐
职位	位置关键字或长度描述渐变中心的位置。	位置关键字或长度前面带有介词 "at"，用于描述渐变中心的位置。现在，位置指定在渐变形状和大小（如果存在）之后。
示例	-ms-radial-gradient(center, aqua, black);	radial-gradient(at center, aqua, black);
大小关键字	渐变大小由以下六个关键字之一定义：farthest-corner、farthest-side、closest-corner、closest-side、contain 和 cover。	渐变大小由以下四个关键字之一定义：farthest-corner、farthest-side、closest-corner 和 closest-side。contain 和 cover 不再有效，分别对应 closest-side 和 farthest-corner。
示例	-ms-radial-gradient(circle cover, lime, black);	radial-gradient(circle farthest-corner, lime, black);
大小和形状语法	使用长度指定的径向渐变必须同时指定水平和垂直半径长度。	径向渐变可以仅使用单个半径长度来指定圆形。
示例	-ms-radial-gradient(center, 50px 50px, red, black);	radial-gradient(circle 50px at center, red, black);

背景

CSS3 渐变定义在 CSS 图像值和替换内容模块级别 3 W3C 候选推荐标准 中。渐变最初于 2009 年添加到规范中。它们基于 WebKit 中引入的渐变，但语法有所改进。当时，WebKit 实现了 -webkit-gradient()。CSS 工作组对该功能进行了迭代并更改了其语法。径向渐变和线性渐变将使用单独的属性值 linear-gradient() 和 radial-gradient() 进行指定。几年后，所有主流浏览器—Chrome、Firefox、IE10 平台预览版 1 和 Opera—都引入了对 W3C 2011 年 2 月 17 日工作草案 中描述的 CSS 渐变版本的支持。

在对工作草案进行仔细审查后，提出了一些更改，经过大量讨论，规范被编辑以反映这些更改。上述表格中列出的主要更改通过解决清晰度和一致性问题来改进旧规范。例如，在旧的角度坐标系统中，正角度沿逆时针方向增加。这与 CSS Transform 和 SVG Transform 不同，后者中正角度旋转沿顺时针方向进行。随着规范的更改，描述 CSS 渐变的角度现在与其他 CSS 角度保持一致，并沿顺时针方向增加。

在更改渐变语法的过程中，尽管规范处于工作草案阶段，兼容性仍是公认的问题。并非所有情况都兼容，但大量现有内容将继续正常工作。默认值保持不变，因此其渲染将不会改变。对于渐变线方向，必需的 "to" 介词既增加了清晰度，又改变了有效语法。使用旧语法和无前缀渐变的现有内容将无效，从而回退到使用厂商前缀的版本。

更新您的无前缀渐变

现在 CSS3 渐变已稳定，我们鼓励您将渐变标记更新为正确的候选推荐无前缀渐变语法。Internet Explorer 10 开发人员指南包含 无前缀语法的完整更新文档。您也可以移除 -ms- 前缀渐变的实例，因为 IE10 支持无前缀版本。如果您使用角落关键字或角度来描述渐变方向，您可能需要验证您的渐变是否仍按预期进行渲染。

虽然厂商前缀的渐变在 Internet Explorer 10 和其他现代浏览器中仍然可用，但添加对无前缀渐变的正确支持可以使您的内容面向未来，并帮助您节省时间。