Udostępnij za pośrednictwem

IE 10 平台预览版 1 中的 CSS3 渐变

  • Artykuł
 

 

我们非常高兴能够在 Internet Explorer 10 平台预览版 1 中提供 CSS3 渐变的供应商前缀支持[caj1] ！CSS3 渐变来自 CSS3 图像值和替换内容规范的一个小节，该规范目前仍处于工作草案状态。利用 CSS 标记，浏览器即可生成渐变图像，并可在允许使用 CSS 图像的位置呈现此图像。在平台预览版 1 中，CSS3 渐变可用作背景图像。

为何使用 CSS 渐变？

Web 开发人员广泛地利用渐变来创建美观的站点。渐变往往用于打造深度感和添加色彩。在文本和菜单的背景中经常可以发现精致的渐变。

clip_image003
在站点和菜单背景中使用精致渐变的几个简单示例

如今，实现渐变效果的最常见的方法就是在需要渐变的位置使用光栅图像。利用 CSS 渐变，Web 创作者无需为渐变创建单独的图像。CSS 渐变支持使用 CSS 标记来描述和生成渐变图像，提供无缝的色彩过渡效果。与纯色背景相似，渐变背景也可完全在 CSS 中指定。在此基础之上，所生成的渐变图像可依赖于应用此渐变图像的容器的大小。例如，可以轻松指定跨 <div> 元素背景填充的径向渐变，即使在 <div> 的大小发送变化时也是如此。利用百分比单元，一行 CSS 标记就足以为多个不同大小的 <div> 应用渐变。使用光栅图像显示渐变时，如果需要调整大小，则渐变的保真度可能会降低。对于与背景大小属性共同使用的渐变或者在各种需要频繁执行缩放操作的设备上显示的渐变，这种情况极为常见。

clip_image005
div { background-image:-ms-radial-gradient(yellow 0%, fuchsia 100%); }
应用于全部 3 个 <div>

更改站点的外观十分轻松。只需在 CSS 样式表中进行全部必要更改即可。使用外部图形资源往往需要通过独立的图形编辑器更新外部资源、更改站点的配色方案，但使用 CSS 渐变时则不必如此。CSS 渐变为 Web 创作者提供了更多的灵活性，降低了更改站点外观的繁琐度。特别是由于 IE10 提供了适应能力更高的布局模式，比如 CSS3 Grid Layout、Flexible Box Layout 和Multi-column Layout，因此灵活性也更加重要。

标记所占用的带宽也更低。例如，使用 -ms- 供应商前缀的简单双色线性渐变标记仅为 38 字节。即便在使用四个供应商前缀和一个无前缀版本的情况下，标记的大小也仅为 198 字节，低于 1x100 PNG 格式下同等渐变的 215 字节。要包含在背景图像中的标记几乎可以忽略不计，而且此处假设可以使用非常小的重复图形。此外，无需加载独立图像文件，节约了下载时间，也为用户提供了更高速的体验。

如何使用 CSS 渐变

CSS 渐变是由形状和色标点描述的。渐变可以包含多个色标点，并为各色标点分别指定一个 RGBA 颜色和位置。CSS 渐变的可选风格有两种：线性渐变和径向渐变。正如其名称所表示的那样，它们描述了渐变的形状。下面给出了线性渐变和径向渐变的几个示例，随后给出了在 IE10 平台预览版 1 中的显示效果。

可以看到，对于线性渐变来说，可以选择通过关键字（top 或 bottom、left 或 right）或者角度来指定渐变线的方向，后接一系列色标点。每个色标点都需要一个颜色，还可选择指定一个位置作为与渐变线之间的距离。所生成的线性渐变包含色标点之间的平滑颜色过渡。

clip_image007
background-image: -ms-linear-gradient(30deg, orange, yellow 50%, turquoise);

在径向渐变中，可以选择使用与背景位置相同的语法来指定渐变椭圆形的中心位置。随后可以使用关键字或长度/百分比，指定渐变的形状（圆形或椭圆形）和大小。

clip_image009
background-image: -ms-radial-gradient(top center, circle cover, orange, yellow 25px, turquoise);

您可以添加 CSS 渐变支持，实现更快速的加载时间、更好的图形保真度，同时继续为使用不支持 CSS 渐变的浏览器的用户提供外部背景图像或纯色。只需确保 CSS 渐变所在的图层处于外部图像或纯色之后即可。通过这样的方式，能够识别渐变语法的浏览器即可使用 CSS 渐变，而不能识别此语法的浏览器将忽略 CSS 渐变并使用已经指定的背景。

{
    background:#FFFFFF;
    background-image:-ms-radial-gradient(top center, circle cover,
        orange, yellow 25px, turquoise);
}

IE10 PP1 中的已知问题

IE10 平台预览版 1 不支持预乘 alpha 颜色空间中的颜色插值。这也就是说，具有不同 alpha 值的 rgba() 颜色之间的插值的效果比应有效果差。这一点对于 alpha 值为 0 的黑色色标点来说尤为值得注意。在过渡到一个透明的黑色色标点时，颜色过渡将在转为透明之前淡化为黑色，而不是直接淡化为赏心悦目的透明效果。

在白色背景上，从橘黄色渐变为 rgba(0, 0, 0, 0) 的透明黑色：

clip_image011

clip_image013

未预乘的颜色空间

预乘的颜色空间

IE10 将在预乘颜色空间中支持颜色插值。这将在未来的平台预览版中提供。

此外，IE 10 和未来预览版中将提供在列表样式图像以及所生成的内容中对 CSS 渐变的支持。另外请牢记，平台预览版 1 中的重复渐变（可使用 -ms-repeating-linear-gradient 和 -ms-repeating-radial-gradient 取代 -ms-linear-gradient 和 -ms-radial-gradient 来提供重复渐变）反射了渐变，而非重复渐变。此问题同样将在 IE10 中得到修复。

基于 WebKit 的浏览器的互操作性备注

在本文撰写之时，Safari 5.0.4 尚不支持当前 W3C 工作草案中所述的 CSS 渐变语法的供应商前缀版本。Webkit 最初为另外一种 CSS 渐变语法的供应商前缀版本提供了支持，也就是 Safari 目前支持的版本。然而，WebKit 近来添加了对渐变语法标准版本的供应商前缀支持。同样基于 WebKit 呈现引擎的 Chrome 目前支持该语法的 W3C 草案版本 (Chrome 10.0.648.204)。虽然 Safari 将有望采用标准版的渐变语法，但有必要说明，如果您希望在目前使用 Safari 显示 CSS 渐变，就需要额外的渐变定义。

动手演练

请在 IE10 平台预览版 1 中试用 CSS3 渐变。我们期待您的反馈。您可以尝试我们在 IE Test Drive 站点中提供的 CSS Gradient Background Maker，以此作为入门，生成可互操作的标记。

您在寻找适用于 IE9 的渐变解决方案？请试用我们的 SVG Gradient Background Maker，生成可在 IE9 和目前大多数其他浏览器中使用的基于 SVG 的 CSS 背景图像。通过将 SVG 渐变背景图像与 CSS 渐变背景图像相结合，您就可以创建能在 IE 9 和全部其他浏览器的当前版本中工作的标记。

—Jennifer Yu，项目经理，Internet Explorer Web Graphics

[caj1]不通顺