谷歌浏览器中的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线性渐变错误

回答

相关问题