CSS中如何实现硬边缘线性渐变？复刻图片颜色混合问题求解

哈哈，这个问题我之前也踩过坑！你现在遇到的是线性渐变默认的平滑过渡效果，想要做出硬边缘的色块其实很简单，核心就是让相邻颜色的渐变断点位置完全重合就行～

问题根源 #

你原来的代码里只给了每个颜色的起始位置，浏览器会自动在相邻两个颜色的位置之间生成平滑过渡，所以就出现了颜色混合的情况。比如你写的#252525 0%, #f5f5f5 20%，浏览器会在0%到20%之间把深灰和浅灰慢慢混合，自然就没有硬边缘了。

解决方法 #

给每个颜色同时指定起始位置和结束位置，让前一个颜色的结束位置和后一个颜色的起始位置完全相同，这样两个颜色之间就没有过渡空间，直接切换成硬边缘。

修改你的代码如下：

background-image: linear-gradient(
  to left,
  #252525 0% 20%,
  #f5f5f5 20% 40%,
  #00b7b7 40% 60%,
  #b70000 60% 80%,
  #fcd50e 80% 100%
);

原理说明 #

• 每个颜色值后面的两个百分比，第一个是该颜色开始渲染的位置，第二个是停止渲染的位置
• 比如#252525 0% 20%表示深灰色从容器的0%宽度位置开始，到20%宽度位置结束
• 紧接着#f5f5f5 20% 40%表示浅灰色从20%宽度位置开始，和前一个颜色的结束位置完全重合，所以两者之间没有过渡，直接呈现硬边缘

如果是更简单的双色硬边缘渐变，比如左红右蓝，写法就是：

background-image: linear-gradient(to right, red 50%, blue 50%);

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