css：固定跨度间隔的渐变色设置

粉末的沉淀2025-09-29 8:07

设计图如下，需要实现一个从上往下，浅绿色到白色的渐变背景。

直接写从浅绿色到白色，代码如下：

css 复制代码

background: linear-gradient(to bottom, #C8ECCA, #ffffff);

效果如下：

浅绿色部分占比太多了，设计图里只有顶部一点点是浅绿色，尝试设置一下第一个颜色的终止位置。

background: linear-gradient(to bottom, #C8ECCA 2%, #ffffff);

效果没什么太多变化，浅绿色依旧占比太多，即便是我把2%改成0.1%，也没太多变化。于是转变一下思路，把顶部浅绿色是一个固定的高度，比如100rpx这种，而不是百分比。

问了deepseek，它给我的方法如下：

css 复制代码

background: linear-gradient(to bottom, #C8ECCA 100rpx, #ffffff 200rpx);

这回看着跟设计图差不多了。

0~100rpx是浅绿色，200rpx~bottom是白色，那100rpx~200rpx之间的空档区间是什么颜色？deepseek给我的解释是浏览器会自动将空档区间设置为浅绿色到白的的渐变过渡，如果设置成background: linear-gradient(to bottom, #C8ECCA 100rpx, #ffffff 100rpx); 0~100rpx是浅绿色，100rpx~bottom是白色，就没有渐变效果了。