Google Chrome中的CSS3線性漸變錯誤

Question

我正在一個元素上運行此代碼，該元素實際上導致右下角的一個斜角（本質上看起來像老式照片）。

該代碼在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/

Answer 1

您可以使用以下解決方案：

 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> 

說明：
我認為這是Google Chrome上的錯誤或Google Chrome截斷尺寸的方式。 如果將框調整為較小的尺寸，則會出現一條水平線。 通過這種簡單的解決方案，您可以避免兩條直線（垂直和水平）。

您只需要替換background-size: 50% 50%; background-size: 51% 51%; 。