为链接添加线性渐变下划线的问题及解决方法

你遇到的这个问题其实是渐变配置和背景尺寸设置的双重问题导致的，咱们一步步拆解：

问题根源 #

1. 渐变色标位置重叠：你的渐变代码里两个颜色的位置都设为100%：

   linear-gradient(to right, rgba(57, 72, 255, 1) 100%, rgba(57, 213, 255, 1) 100%)
   

   当两个色标位置完全重合时，浏览器没有空间渲染颜色过渡效果，只会优先显示第一个色值。
2. 背景尺寸限制：background-size: 4px 4px把背景区域缩得极小，进一步压缩了渐变的展示空间，导致第二种颜色完全没有机会显示。

解决方案 #

你提到将background-size改为auto是核心修复点，同时建议调整渐变的色标位置，让两种颜色有过渡的空间，修改后的代码如下：

a { 
  background-image: linear-gradient(to right, rgba(57, 72, 255, 1) 0%, rgba(57, 213, 255, 1) 100%); 
  background-repeat: repeat-x; 
  background-size: auto 4px; /* 宽度自适应内容，高度保持下划线厚度 */
  background-position: 0 22px; 
} 
a:visited { color: #2a2a2a; }

修改说明 #

• 把渐变色标位置调整为0%和100%，让颜色从左到右自然过渡，能完整展示两种颜色的渐变效果
• background-size: auto 4px既保证了下划线的厚度固定，又让渐变宽度随链接内容自适应，避免了尺寸限制导致的颜色截断

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