Google Chrome中的CSS3线性渐变错误

Question

我在我拥有的元素上运行此代码，这实际上会在右下角产生一个斜角（看起来像老式照片）。

代码在Firefox和Safari中运行良好，但在Chrome中，我看到一条奇怪的透视线垂直穿过中间（见下文）。

本教程中的代码：suggested here

click here

更奇怪的是它只发生在一些存在的元素上。

以下是目前形式的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在这里！

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%;。