使用CSS linear-gradient实现多色边框的优化问询

你的思路没问题——用线性渐变实现多色边框确实高效，但Chrome的抗锯齿渲染会让颜色交界出现模糊，尤其是在窄高度元素上。下面是几个经过验证的优化方案，能让颜色边界变得锐利清晰：

方案1：使用独立色块渐变（最可靠） #

放弃单一渐变，改用多个独立的线性渐变，每个色块单独定义位置和宽度。这种方式完全消除过渡区域，渲染效果最精准：

body { background: #333; }
.my-div { 
  text-align: center; 
  position: relative; 
  line-height: 100px; 
  background: #fff; 
  height: 100px; 
  width: 100%; 
}
/* 优化后的多色底部边框 */
.my-div:after { 
  background: 
    /* 透明块：占45%宽度 */
    linear-gradient(transparent, transparent) 0 0 / 45% 100%,
    /* 绿色块：从45%开始，占15%宽度（60%-45%） */
    linear-gradient(#87c846, #87c846) 45% 0 / 15% 100%,
    /* 红色块：从60%开始，占10%宽度（70%-60%） */
    linear-gradient(#e32b2d, #e32b2d) 60% 0 / 10% 100%,
    /* 黄色块：从70%开始，占25%宽度（95%-70%） */
    linear-gradient(#ffc846, #ffc846) 70% 0 / 25% 100%,
    /* 灰色块：从95%开始，占5%宽度（100%-95%） */
    linear-gradient(#847c6c, #847c6c) 95% 0 / 5% 100%;
  background-repeat: no-repeat;
  position: absolute; 
  content: ''; 
  height: 20px; 
  right: 0; 
  left: 0; 
  bottom: -20px;
}

方案2：强化硬停止+锐利渲染 #

如果你想保留单一渐变的写法，确保相邻颜色的停止点完全重合（硬停止），再加上Chrome专属的渲染属性强制消除模糊：

body { background: #333; }
.my-div { 
  text-align: center; 
  position: relative; 
  line-height: 100px; 
  background: #fff; 
  height: 100px; 
  width: 100%; 
}
/* 优化后的单一渐变版本 */
.my-div:after { 
  background: linear-gradient(to right, 
    transparent 0% 45%, 
    #87c846 45% 60%, 
    #e32b2d 60% 70%, 
    #ffc846 70% 95%, 
    #847c6c 95% 100%);
  position: absolute; 
  content: ''; 
  height: 20px; 
  right: 0; 
  left: 0; 
  bottom: -20px;
  /* 强制Chrome使用锐利渲染，消除抗锯齿模糊 */
  image-rendering: crisp-edges;
}

为什么原来的代码会模糊？ #

虽然你已经用了硬停止（比如transparent 45%, #87c846 45%），但Chrome在渲染窄高度（20px）的渐变时，会自动添加轻微的抗锯齿，导致颜色交界出现模糊。image-rendering: crisp-edges会告诉浏览器放弃平滑过渡，优先保证边缘锐利；而多独立渐变的方式则从根源上避免了过渡区域的产生。

<div class="my-div"> hello </div>

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