线性渐变导致铬条带

Question

我正面临着铬线性渐变的问题。这是我的代码

div{
  background: linear-gradient(20deg, rgb(213, 213, 55), rgb(158, 158, 33));
    background: -webkit-linear-gradient(20deg, rgb(213, 213, 55), rgb(158, 158, 33));
    background: -moz-linear-gradient(20deg, rgb(213, 213, 55), rgb(158, 158, 33));
    background: -o-linear-gradient(20deg, rgb(213, 213, 55), rgb(158, 158, 33));
  width:400px;
  height:400px;
}

<div>
</div>

使用渐变时在铬中出现一些条带。镀铬时渐变不均匀。这是截图。

请帮忙。

Answer 1

您可以尝试使用2层。从颜色到透明，并将它们相互叠加：

＆＃13;

＆＃13;

div {
  position: relative;
  background: linear-gradient(20deg, rgb(213, 213, 55), transparent);
  width: 400px;
  height: 400px;
}

div:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(20deg, transparent, rgb(158, 158, 33));
}

＆＃13;

<div>
</div>

＆＃13;

＆＃13;

＆＃13;