线性梯度在Chrome中不起作用 [英] linear-gradient not working in Chrome
问题描述
经过大量搜索后,我遇到了线性梯度,它在Firefox中可用,但在Chrome中不行。
After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome.
我添加了 -webkit -
之前的线性梯度描述,但仍然不工作我认为问题是在梯度轴
I added -webkit-
before linear-gradient as described in one reference but still not working I think the problem is in gradient axis
我的代码
<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%);
}
在这里创建一个小提琴 - http://jsfiddle.net/h2zu5xx2/4/
Creates a fiddle here -- http://jsfiddle.net/h2zu5xx2/4/
任何提示/建议都会很好。提前感谢。
Any hint/suggestion will do great. Thanks in advance.
推荐答案
首先请注意 -webkit-gradient
被苹果打算并在2008年在基于Webkit的Web浏览器(例如Safari 4)中实现,它的语法与W3C标准相当不同:
First of all note that -webkit-gradient
was 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(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
例如:
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.
一年后,Mozilla推出了 -moz-linear-gradient
(从Firefox 3.6开始),它的语法与旧的Webkit版本不同,然后在Webkit中在 -webkit-linear-gradient
下实现:
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
:
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)
然而W3C标准版本 linear-gradient
linear-gradient()
expression is:
However the W3C standard version of linear-gradient
is quiet different, the formal syntax of linear-gradient()
expression is:
linear-gradient() = linear-gradient(
[ <angle> | to <side-or-corner> ]? ,
<color-stop-list>
)
<side-or-corner> = [left | right] || [top | bottom]
在您发布的代码中可以看到,另一个错误是缺少到< side>
。因此,在您的情况下,应该是:
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:
示例 。
Example Here.
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 */
这篇关于线性梯度在Chrome中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!