如何用CSS按像素设置多色渐变？实现指定Y轴坐标的7色布局

你遇到的问题是因为色标的位置写法不对——原来的代码只指定了每个颜色的起始点，浏览器会自动在相邻色标之间生成过渡效果，而不是让每个颜色精确占据1像素高度。要实现你想要的效果，需要明确每个颜色的起始和结束像素位置，让颜色之间没有过渡。

正确的实现代码 #

.your-div-class {
  background-image: linear-gradient(
    to bottom,
    #e2e2e2 0 1px,    /* Y轴0-1px：第一种颜色 */
    #e8e8e8 1px 2px,  /* Y轴1-2px：第二种颜色 */
    #efefef 2px 3px,  /* Y轴2-3px：第三种颜色 */
    #f4f4f4 3px 4px,  /* Y轴3-4px：第四种颜色 */
    #f7f7f7 4px 5px,  /* Y轴4-5px：第五种颜色 */
    #f8f8f8 5px 6px,  /* Y轴5-6px：第六种颜色 */
    #f9f9f9 6px 100%  /* Y轴6px到div底部：第七种颜色 */
  );
  /* 确保div有足够高度，比如设置min-height让最后一种颜色能显示 */
  min-height: 20px;
}

原理说明 #

CSS的linear-gradient支持区间色标写法（起始位置 结束位置）：

• 每个颜色块的起始位置等于上一个颜色块的结束位置，这样两个颜色之间没有过渡，直接切换
• 最后一个颜色的结束位置设为100%，就能自动填充div剩余的所有空间

另一种等价写法（拆分多个渐变） #

如果你觉得区间写法不太直观，也可以用多个独立的线性渐变叠加，每个渐变只占1px高度：

.your-div-class {
  background-image: 
    linear-gradient(#e2e2e2, #e2e2e2),
    linear-gradient(#e8e8e8, #e8e8e8),
    linear-gradient(#efefef, #efefef),
    linear-gradient(#f4f4f4, #f4f4f4),
    linear-gradient(#f7f7f7, #f7f7f7),
    linear-gradient(#f8f8f8, #f8f8f8),
    linear-gradient(#f9f9f9, #f9f9f9);
  background-size: 100% 1px;
  background-position: 
    0 0,
    0 1px,
    0 2px,
    0 3px,
    0 4px,
    0 5px,
    0 6px;
  background-repeat: no-repeat;
  min-height: 20px;
}

这种方法通过background-position精确控制每个1px渐变的Y轴位置，最后一个渐变默认会填充剩余空间（因为没有设置background-size的高度，会撑满整个div）。

内容的提问来源于stack exchange，提问作者RealAnwersOnly