问题
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?
回答1:
I think you found a bug! Or at least Safari is interpreting the angles differently.
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%);
Demo
回答2:
This isn't a bug - there were quite a few changes between the Working Draft and the Candidate Recommendation for the gradient syntax, one of which is the angle of the gradient:
From the IE Blog. Hence the unprefixed version requires a different deg value to the prefixed versions. The CR is much more logical (to me at least), with 0deg being a gradient line pointing to the top and increasing in a clockwise direction.
来源：https://stackoverflow.com/questions/15720299/webkit-linear-gradient-w-angle-reversed-in-safari