-webkit-linear-gradient with / angle在Safari中反转

Question

在我找到一个CSS解决方案的过程中，我想要一个带有角度的均匀彩色元素以避开图像我偶然发现了这个简单的例子：http://dabblet.com/gist/1780333。这个工作正常，即使在最新的IE浏览器中，只有Safari完全颠倒它，把它放到最后而不是开头并且部分转向角度，至少在我的实时网站中它并不一致。当然，我对所有浏览器版本都有相同的值。

任何人都知道为什么会如此以及可以做什么 - 或者是没有图像的替代解决方案来提出元素的左侧角度？

Answer 1

这不是一个错误 - 工作草案和候选推荐标准之间的梯度语法有很多变化，其中一个是渐变的角度：

来自IE Blog。因此，无前缀版本需要与前缀版本不同的deg值。 CR更合乎逻辑（至少对我而言），0deg是指向顶部的渐变线，顺时针方向增加。

Answer 2

我认为你发现了一个错误！或者至少Safari正在以不同的方式解释角度。

这并不奇怪，因为直到最近Safari使用的-webkit-gradient语法灵活性要低得多。例如，它不允许角度。

仍然可以通过包含仍然有效的旧语法来解决您的问题：

  background: -webkit-gradient(linear, 10% 100%, 0% 0%, color-stop(80%, #000000), color-stop(80%, transparent));
  background: -webkit-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: -moz-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: -o-linear-gradient(60% 100%, #000000 80%, transparent 80%);
  background: linear-gradient(60% 100%, #000000 80%, transparent 80%);

Demo