Chrome呈現線性漸變非常不連貫

我試圖添加一個功能區到使用CSS3線性漸變的頁面，但在Chrome中的渲染看起來比它的Firefox或IE替代品少得多宜人。 Chrome瀏覽器中的顏色停留在非常像素的位置，但使用供應商前綴屬性不起作用，因爲它們不允許指定度數。Chrome呈現線性漸變非常不連貫

#extradiv1 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 121px; 
    height: 71px; 
    background: url(../img/ribbon.png); 
    background: linear-gradient(30deg, 
     transparent 61px, 
     rgb(255, 204, 51) 61px, 
     rgb(255, 204, 51) 76px, 
     rgb(22, 22, 22) 76px, 
     rgb(22, 22, 22) 91px, 
     transparent 91px 
); 
}

<html> 
    <body> 
    <div id="extradiv1"></div> 
    </body> 
</html>

的源代碼，也可以在http://jsfiddle.net/xyFXx/2/

發現有什麼辦法來解決在Chrome這個波濤洶涌的渲染？

來源

2014-02-15 ndgraef

這是一個相當古老的問題，但我認爲我會插手以防止任何人仍在尋找答案。

如果你不關心IE 9以前的版本，那麼transform：rotate 應該會產生更好的渲染結果（透明傾斜梯度確實可能會變得不連貫或在梯度連接處得到間隙）。

你可以用兩個旋轉的div或者一個div和相關的僞元素來做到這一點。這裏的CSS：

.rotatedDiv { 
    position: absolute; 
    -ms-transform:rotate(30deg); 
    -webkit-transform:rotate(30deg); 
    transform:rotate(30deg); 
} 

#extradiv1 { 
    top: 20px; 
    right: -30px; 
    width: 200px; 
    height: 20px; 
    background: rgb(255,204,51); 
} 

#extradiv2 { 
    position: absolute; 
    top: 0; 
    right: -20px; 
    width: 170px; 
    height: 20px; 
    background: rgb(22,22,22); 
}

小提琴：http://jsfiddle.net/brianhewitt1/m4KBC/

來源

2014-06-01 19:24:59

謝謝仍在進行的時間我的問題！ – ndgraef

Chrome呈現線性漸變非常不連貫

回答

相關問題