webkit css_WebKit更新CSS3渐变支持，匹配Mozilla语法

webkit css

星期五，WebKit团队宣布他们将更新渲染引擎中CSS3渐变支持，使其与Mozilla的实现保持一致。 除旧的-webkit-gradient值之外，Nightly WebKit的构建现在还包括对-webkit-linear-gradient和-webkit-radial-gradient 。 这些新值使用与-moz-linear-gradient和-moz-radial-gradient相同的语法，因此开发人员现在可以使用相同的值集并简单地复制它们，而不用像以前所要求的那样编写两种语法。 过去，由于旧的WebKit语法难以记住，因此过去的大多数开发人员都不再使用梯度代码生成器。 使用这种新的更简单且一致的语法，在工作场所使用渐变将变得非常容易。

该语法还包含在最新CSS3图像值和替换内容模块编辑器草案中 。

幸运的是，对于已经开始使用旧的-webkit-gradient开发人员，现有站点不会中断。 这是因为新属性的名称不同，并且-webkit-gradient的现有实现不会被删除。

作为新支持的演示，公告博客文章包括许多示例渐变。 看一下源代码，您会发现-moz-linear-gradient和-webkit-linear-gradient值都相同。 径向渐变以及线性和径向渐变的重复版本也是如此。

对于那些不熟悉语法的人，让我们快速入门一下。 指定一个简单的线性渐变很简单：

background-image: -webkit-linear-gradient(black, white);
background-image: -moz-linear-gradient(black, white);

如果您希望梯度沿着不同的轴，则可以使用诸如left ， right ， top ， bottom ， bottom left ， bottom right等关键字来指定原点，或者以度为单位指定方向的值渐变将运行。 角度值位于颜色列表停止之前，并且度数是从右侧顺时针计算的。 因此，对于从框的右上角开始到左下角结束的渐变，您可以编写以下任意一个：

background-image: -webkit-linear-gradient(top right, black, white);

background-image: -webkit-linear-gradient(135deg, black, white);

您还可以定义停靠点以调整每种颜色的开始位置，并且可以指定任意数量的不同颜色。

径向渐变的语法非常相似：

background-image: -webkit-radial-gradient(black, white);

如果要定位渐变的中心，只需指定X和Y值即可，与背景位置相同：

backround-image: -webkit-radial-gradient(10px 10px, black, white);

您还可以调整径向渐变的形状和大小，有关详细信息，请查看规格或公告 。

一致的实现和规范草案是CSS3渐变朝着我们可以在日常项目中使用的方向迈出的重要一步。 如果您过去因为它们的复杂性而避开它们，那么对WebKit的更新是否会让您重新考虑使用它们？

注意：需要更多吗？

如果您想了解更多来自Louis的信息，请订阅我们的每周技术新闻通讯Tech Times 。

翻译自: https://www.sitepoint.com/webkit-updates-css3-gradient-support-matches-mozilla-syntax/

webkit css