线性渐变不适用于Chrome

问题描述：

经过大量搜索之后，我陷入了线性渐变，它适用于Firefox，但不适用于Chrome。线性渐变不适用于Chrome

我线性渐变前加入-webkit-作为一个参考，但仍无法正常工作，我认为这个问题是在梯度轴上

我的代码

<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/

任何提示/建议都会很好。提前致谢。

您的webkit渐变的css是错误的。无效的属性，如果你看它，所以语法是错误的。你有没有从诸如chrome开发工具之类的检查器中查看它，你可以很容易地发现它。 – Dorvalla 2014-10-11 20:35:09

@Hashem我无法评论你的答案，也无法再看到它。但我想非常感谢你指出我的错误和这个辉煌的解释。 – Raj 2014-10-11 20:55:56

答

首先要注意的是-webkit-gradient意在通过苹果和基于WebKit网络浏览器在2008年实施（例如Safari浏览器4）具有非常不同的语法比W3C标准：

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

这就是为什么你不能得到它在你的情况下工作。

一年后的Mozilla推出-moz-linear-gradient（因为火狐3.6），它也具有不同的语法比旧的Webkit版本，但随后在Webkit的实施-webkit-linear-gradient下：

-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+)

然而linear-gradient的W3C标准版安静不同，linear-gradient()表达的正式语法是：

linear-gradient() = linear-gradient(
    [ <angle> | to <side-or-corner> ]? , 
    <color-stop-list> 
) 
<side-or-corner> = [left | right] || [top | bottom]

如可以在你的代码发布中可以看出，对方误以为是缺乏W3C版本中的。因此，你的情况应该是：

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 */

简直太棒了。非常感谢你的解释。现在我可以说我完全理解了渐变问题。 – Raj 2014-10-11 21:36:08

答

使用

background: -webkit-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);

为类似的定义Mozilla的。

线性渐变不适用于Chrome

相关推荐