lineare-gradiente non funziona in Chrome

Question

Dopo una buona quantità di ricerca sono bloccato con sfumatura lineare che funziona in Firefox ma non in Chrome.

ho aggiunto -webkit- prima lineare gradiente come descritto in una relazione, ma ancora non funziona Credo che il problema è in asse gradiente

Il mio codice

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

Crea un violino qui - http://jsfiddle.net/h2zu5xx2/4/

Qualsiasi suggerimento/suggerimento sarà perfetto. Grazie in anticipo.

Answer 1

Prima di tutto notare che -webkit-gradient era destinato da Apple e attuate nel corso del 2008 nei browser web Webkit base (per esempio Safari 4), che ha una sintassi molto diverso rispetto allo standard W3C:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) 

Per esempio:

background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); 

Questo è il motivo per cui non si poteva farlo funzionare nel tuo caso.

Un anno dopo Mozilla ha introdotto -moz-linear-gradient (dal Firefox 3.6), che ha anche una sintassi diversa rispetto alla vecchia versione Webkit ma poi implementato in Webkit sotto -webkit-linear-gradient:

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

Tuttavia la versione standard del W3C di linear-gradient è tranquilla diversa, la sintassi formale della linear-gradient() espressione è:

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

Come si può vedere nel codice scritto, l'altro errore è la mancanza di to <side> nella versione W3C. Pertanto, nel tuo caso dovrebbe essere:

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

Answer 2

Usa

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

come definizione simile a Mozilla di.