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

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

这里是 fiddle： 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>

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

Remove border color from linear gradient

html

css

cross-browser

linear-gradients