CSS 线性渐变在 Chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26318988/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
linear-gradient not working in Chrome
提问by Raj
After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome.
经过大量搜索后，我坚持使用在 Firefox 中有效但在 Chrome 中无效的线性渐变。
I added -webkit-before linear-gradient as described in one reference but still not working I think the problem is in gradient axis
我-webkit-在一个参考中描述的线性渐变之前添加但仍然无法正常工作我认为问题出在渐变轴上
My code
我的代码
<nav class="top_menu">
<ul class="black_high">
<li class="first active"> <a href="#">Home</a>
</li>
<li> <a href="#">news</a>
</li>
</ul>
</nav>
.top_menu ul li.active a::after {
position: absolute;
bottom: 8px;
left: 0;
width: 100%;
height: 2px;
transform:none;
content: '';
opacity: 1;
background: #fff;
background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}
Creates a fiddle here -- http://jsfiddle.net/h2zu5xx2/4/
在这里创建一个小提琴 -- http://jsfiddle.net/h2zu5xx2/4/
Any hint/suggestion will do great. Thanks in advance.
任何提示/建议都会很好。提前致谢。
回答by Hashem Qolami
First of all note that -webkit-gradientwas intended by Apple and implemented in 2008 in Webkit based web browsers (for instance Safari 4) which has a pretty different syntax than the W3C standard:
首先请注意，这-webkit-gradient是 Apple 的意图，并于 2008 年在基于 Webkit 的 Web 浏览器（例如 Safari 4）中实现，其语法与 W3C 标准完全不同：
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
For instance:
例如：
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0));
This is why you couldn't get it to work in your case.
这就是为什么你不能让它在你的情况下工作的原因。
A year later Mozilla introduced -moz-linear-gradient(since Firefox 3.6) which has also a different syntax than the old Webkit version but then it implemented in Webkit under -webkit-linear-gradient:
一年后，Mozilla 推出-moz-linear-gradient（自 Firefox 3.6 起），它的语法也与旧的 Webkit 版本不同，但随后在 Webkit 中实现了-webkit-linear-gradient：
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)
However the W3C standard version of linear-gradientis quiet different, the formal syntax of linear-gradient()expression is:
然而 W3C 标准版本的linear-gradient安静不同，linear-gradient()表达式的正式语法是：
linear-gradient() = linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
As can be seen in your posted code, the other mistake is the lack of to <side>in the W3C version. Therefore, in your case it should be:
从您发布的代码中可以看出，另一个错误是to <side>W3C 版本中的缺失。因此，在您的情况下，它应该是：
background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(50%,#fff), color-stop(100%,transparent)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* Chrome10+, Safari5.1+ */
background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%); /* FF3.6+ */
background: linear-gradient(to left, transparent 0%,#fff 50%,transparent 100%); /* W3C */
回答by podwysoc
Use
用
background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
as the similar definition to Mozilla's.
作为类似于 Mozilla 的定义。
