線性漸變不適用於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/

任何提示/建議都會很好。提前致謝。

來源

2014-10-11 Raj

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

來源

2014-10-11 20:40:23

簡直太棒了。非常感謝你的解釋。現在我可以說我完全理解了漸變問題。 – Raj 2014-10-11 21:36:08

使用

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

爲類似的定義Mozilla的。

來源

2014-10-11 20:35:44 podwysoc

線性漸變不適用於Chrome

回答

相關問題