线性渐变产生虚线

Question

我的页面中有一个线性渐变，它是Dashed line

实际上，它应该是一条实线，而不是虚线。这是它的代码：

background: -webkit-linear-gradient( left top, #ffe1d9  50%, #989cdb 50%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, #ffe1d9  50%, #989cdb 50%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, #ffe1d9  50%, #989cdb 50%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom left, #ffe1d9  50%, #989cdb 50%); /* Standard syntax */

任何人都知道如何产生实线性渐变？谢谢！

Answer 1

显然，浏览器认为它不必对此渐变进行任何抗锯齿，因为颜色之间存在明显的截止点。所以，没有渐变效果！
（顺便说一句，所有浏览器的效果都不一样; Chrome似乎受到的影响最大。）

解决方案：不要使用50％的颜色中断，但只留下它们之间的最小量，以创建从颜色到颜色的实际渐变。百分之五十会做。

＆＃13;

＆＃13;

.lines {
  height: 4em;
  
  background: -webkit-linear-gradient(left top, #ffe1d9 49.75%, #989cdb 50.25%);
  background: -moz-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%);
  background: -o-linear-gradient(bottom right, #ffe1d9 49.75%, #989cdb 50.25%);
  background: linear-gradient(to bottom left, #ffe1d9 49.75%, #989cdb 50.25%);
}

＆＃13;

<div class="lines"></div>

＆＃13;

＆＃13;

＆＃13;

为了比较，这里是原始的，每个50％。

＆＃13;

＆＃13;

.lines {
  height: 4em;
  
  background: -webkit-linear-gradient(left top, #ffe1d9 50%, #989cdb 50%);
  background: -moz-linear-gradient(bottom right, #ffe1d9 50%, #989cdb 50%);
  background: -o-linear-gradient(bottom right, #ffe1d9 50%, #989cdb 50%);
  background: linear-gradient(to bottom left, #ffe1d9 50%, #989cdb 50%);
}

＆＃13;

<div class="lines"></div>

＆＃13;

＆＃13;

＆＃13;