-webkit-线性梯度w /角在Safari中颠倒 [英] -webkit-linear-gradient w/ angle reversed in Safari

问题描述

在我找到一个CSS解决方案，有一个均匀的彩色元素与斜角开始，以避免图像我偶然发现这个简单的例子： http://dabblet.com/gist/1780333 。这一个是工作正常，即使在IE的最新，只有Safari正在扭转它完全，它的结束，而不是开始，并转动角度部分，至少在我的活网站它不一致。我有，当然，所有浏览器版本的相同的值。

On my way to finding a CSS solution to have an evenly colored element with angled beginning to avoid images I stumbled across this simple example: http://dabblet.com/gist/1780333 . This one is working fine, even in IE of the latest, only Safari is reversing it completely, putting it to the end instead of the beginning AND turning the angle partly, at least in my live site it's not consistent. I have, of course, the same values for all browser versions.

任何人都知道为什么会是这样，可以做什么 - 或者没有图像的替代解决方案，不会出现一个有角度的元素左侧？

Anybody an idea why it is so and what one can do - or an alternative solution without images to come up with an angled left side of an element?

推荐答案

我认为你发现了一个错误！

I think you found a bug! Or at least Safari is interpreting the angles differently.

这并不奇怪，直到最近Safari使用 -webkit-gradient 语法更不灵活。例如，它不允许角度。

This isn't surprising as until pretty recently Safari used the -webkit-gradient syntax which is much less flexible. For example, it doesn't allow angles.

仍然可以通过添加旧的语法来解决您的问题：

Still you can solve your problem by including the old syntax, which still works:

  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%);

演示

这篇关于-webkit-线性梯度w /角在Safari中颠倒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！