IE10平台预览第一版中的CSS3渐变

更改站点的外观十分轻松。只需在 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）或者角度来指定渐变线的方向，后接一系列色标点。每个色标点都需要一个颜色，还可选择指定一个位置作为与渐变线之间的距离。所生成的线性渐变���含色标点之间的平滑颜色过渡。 background-image:-ms-linear-gradient(30deg, orange, yellow 50%, turquoise); 在径向渐变中，可以选择使用与背景位置相同的语法来指定渐变椭圆形的中心位置。随后可以使用关键字或长度/百分比，指定渐变的形状（圆形或椭圆形）和大小。 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) 的透明黑色：

未预乘的颜色空间	预乘的颜色空间

IE10 将在预乘颜色空间中支持颜色插值。这将在未来的平台预览版中提供。 此外，IE10 和未来预览版中将提供在列表样式图像以及所生成的内容中对 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 渐变背景图像相结合，您就可以创建能在 IE9 和全部其他浏览器的当前版本中工作的标记。 —Jennifer Yu，项目经理，Internet Explorer Web Graphics 原文：CSS3 Gradients in IE10 Platform Preview 1

标签:CSS预览版CSS3渐变IE10IE Web