从线性渐变中删除边框颜色

Question

从叠加线性渐变中删除（边框）颜色时出现问题。在IE 11中，它按预期工作。在Firefox中，渐变之间有一条很小的可见灰线。我该如何删除它？

我试着这样说：

.box2 { 
    background-image: -webkit-linear-gradient(154deg, red 67%, transparent 33%), -webkit-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: -moz-linear-gradient(154deg, red 67%, transparent 33%), -moz-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: -ms-linear-gradient(154deg, red 67%, transparent 33%), -ms-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: -o-linear-gradient(154deg, red 67%, transparent 33%), -o-linear-gradient(26deg, transparent 67%, red 33%); 
    background-image: linear-gradient(154deg, red 67%, transparent 33%), linear-gradient(26deg, transparent 67%, red 33%); 
    background-position: 0 0, 100% 0; 
    background-repeat: no-repeat; 
    background-size: 80% 100%; 
    height: 100px; 
    width: 100%; 
    border: 0; 
} 

这里有一个小提琴： https://jsfiddle.net/aam6roaf/

Answer 1

我可以看到在Firefox v45.0.2或Windows 10的同样的问题，虽然我不知道为什么会出现这条线，当我像下面的代码片段那样设置色彩停止点时，它会消失。设置颜色停止像下面的代码片段也有产生更平滑的倾斜渐变的优点。

这适用于Firefox v45.0.2，Chrome（v51.0.2704.19 dev-m），Opera v36，IE11和Edge。

.box2 { 
 
    background-image: linear-gradient(154deg, red 67%, transparent 67.25%), linear-gradient(26deg, transparent 67%, red 67.25%); 
 
    background-position: 0 0, 100% 0; 
 
    background-repeat: no-repeat; 
 
    background-size: 80% 100%; 
 
    height: 100px; 
 
    width: 100%; 
 
    border: 0; 
 
}

<div class="box2"></div>