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

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。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;