谷歌瀏覽器中的CSS3線性漸變錯誤

我在一個元素上運行這個代碼，基本上導致右下角的一個斜角（本質上看起來像一張老式的照片）。谷歌瀏覽器中的CSS3線性漸變錯誤

該代碼在Firefox和Safari中正常工作，但在Chrome中，我看到一條奇怪的透視直線穿過中間（見下文）。從本教程採取

更奇怪的是它僅出現在一些存在的元素的事實。

這裏是CSS3代碼以目前的形式：

padding:     10px; 
background:     #FFF; 
background: 
    linear-gradient(135deg, transparent 0px, #FFF 0px) top left, 
    linear-gradient(225deg, transparent 0px, #FFF 0px) top right, 
    linear-gradient(315deg, transparent 10px, #FFF 0px) bottom right, 
    linear-gradient(45deg, transparent 0px, #FFF 0px) bottom left; 

background-size: 50% 50%; 
background-repeat: no-repeat;

的jsfiddle這裏！ http://jsfiddle.net/8wzk42ep/

來源

2015-10-20 WebDevDanno

我們可以看到的任何演示？如果你正在尋找一個斜邊漸變，你也可以看看我在[這個答案]中使用的漸變（http://stackoverflow.com/questions/32996454/css-folded-corner-effect-transparent-background/32996982＃32996982）。 – Harry

試用'-webkit' –

@哈利我已經在 – WebDevDanno

您可以採用如下方案：

html, body { 
 
    background-color:#000; 
 
} 
 
div.box { 
 
    padding:10px; 
 
    background:#fff; 
 
    background: 
 
    linear-gradient(135deg, transparent 0px, #fff 0px) top left, 
 
    linear-gradient(225deg, transparent 0px, #fff 0px) top right, 
 
    linear-gradient(315deg, transparent 10px, #fff 0px) bottom right, 
 
    linear-gradient(45deg, transparent 0px, #fff 0px) bottom left; 
 
    background-size:51% 51%; /** changed to 51% */ 
 
    background-repeat:no-repeat; 
 
}

<div class="box"> 
 
    <h1> Hello there! </h1> 
 
</div>

說明：
我認爲這是谷歌Chrome或錯誤谷歌Chrome瀏覽器如何截斷尺寸的方式。如果您將框的大小調整爲較小，則會出現一條水平線。有了這個簡單的解決方案，你可以避免兩條線（垂直和水平）。

您只需將background-size: 50% 50%;替換爲background-size: 51% 51%;即可。

來源

2015-10-20 11:24:28

啊，這是工作！好東西！你能解釋一下爲什麼解決了這個問題嗎？ – WebDevDanno

感謝您的幫助。真的很感激它，看到通過線是U-G-L-Y！：D – WebDevDanno

問題來自Chrome截斷維度。如果元素的寬度爲奇數像素值（例如51px），則背景維度爲25px（四捨五入爲最接近的整數值），並且沒有覆蓋1px – vals

谷歌瀏覽器中的CSS3線性漸變錯誤

回答

相關問題