linear-gradient không hoạt động trong Chrome

Question

Sau một số lượng tìm kiếm tốt, tôi bị kẹt với gradient tuyến tính hoạt động trong Firefox nhưng không hoạt động trong Chrome.

tôi thêm -webkit- trước linear gradient như mô tả trong một tài liệu tham khảo nhưng vẫn không làm việc tôi nghĩ rằng vấn đề là ở trục dốc

Mã của tôi

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

Tạo một fiddle ở đây - http://jsfiddle.net/h2zu5xx2/4/

Bất kỳ gợi ý/đề xuất nào cũng sẽ tuyệt vời. Cảm ơn trước.

Answer 1

Trước hết lưu ý rằng -webkit-gradient được dự định bởi Apple và thực hiện trong năm 2008 tại Webkit trình duyệt dựa trên web (ví dụ Safari 4) trong đó có một cú pháp khá khác biệt so với các tiêu chuẩn W3C:

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

Ví dụ:

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

Đây là lý do tại sao bạn không thể làm cho nó hoạt động trong trường hợp của bạn.

Một năm sau đó Mozilla giới thiệu -moz-linear-gradient (kể từ khi Firefox 3.6) trong đó cũng có một cú pháp khác nhau so với phiên bản Webkit cũ nhưng sau đó nó thực hiện trong Webkit dưới -webkit-linear-gradient:

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

Tuy nhiên, phiên bản tiêu chuẩn W3C của linear-gradient là yên tĩnh khác nhau, cú pháp chính thức của linear-gradient() biểu thức là:

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

Như có thể thấy trong mã mà bạn đã viết, những sai lầm khác là thiếu to <side> trong phiên bản W3C. Do đó, trong trường hợp của bạn, cần phải:

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

Sử dụng

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

như định nghĩa tương tự như của Mozilla.