CSS 渐变 - 颜色中断太多

Question

我运行遇到了 css 线性渐变的问题。我希望以一定的百分比进行干净的颜色中断。但是当我添加超过一定数量时它似乎开始模糊颜色：

这是 css 渐变的示例，带有 "too many" 颜色中断 - 并且在不应该的地方模糊：

div {
  height: 100px;
  background-color: red;
  background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 93%, #ffffff 93% 94%, #ffd900 94% 96%, #ffffff 96% 97%, #042750 97% 100%);
}

<div></div>

这是一个例子，它有足够的颜色中断，所以它不会模糊：

div {
  height: 100px;
  background-color: red;
  background-image: linear-gradient(to right, #ffffff 25%, #042750 25% 28%, #ffffff 28% 29%, #03aeef 29% 31%, #ffffff 31% 32%, #042750 32% 90%, #ffffff 90% 91%, #03aeef 91% 100%)
}

<div></div>

Answer 1

在这种情况下，最好使用多重渐变：

div {
  height: 100px;
  background: 
    /* Color                       position /width height   */
    linear-gradient(#03aeef,#03aeef)  50% 0 / 5%  100%, /* top layer */
    linear-gradient(#fff,#fff)        50% 0 / 10% 100%,
    linear-gradient(#03aeef,#03aeef)  87% 0 / 5%  100%,
    linear-gradient(#ffd900 ,#ffd900) 94% 0 / 5%  100%,
    linear-gradient(#fff,#fff)        95% 0 / 15% 100%,
    linear-gradient(#042750,#042750)  right / 60% 100%; /* bottom layer */
  background-repeat:no-repeat;
}

<div></div>

CSS 渐变 - 颜色中断太多

CSS Gradient - too many color breaks

html

css

linear-gradients