CSS渐变文字出现黑色轮廓问题的解决咨询

问题原因 #

你给span.white设置了两层重叠的背景渐变，其中第二层是纯黑色的线性渐变。即使启用了-webkit-background-clip: text，黑色背景的边缘仍会透过渐变文字的边缘显现，形成你看到的“黑色轮廓”。

修复方案 #

直接移除多余的黑色背景渐变层，只保留彩色渐变即可，同时可以简化重复的CSS属性：

div.marge { height: 100vh; }
* { font-size: 50px; color: black; }

span.white {
    text-decoration: none;
    background: linear-gradient(27deg, rgba(255, 0, 255, 1) 0%, rgba(43, 255, 255, 1) 100%);
    background-size: 125% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text; /* 增加标准属性提升兼容性 */
    -webkit-text-fill-color: transparent;
    padding: 0 2px;
}

补充说明 #

• 全局的* { color: black; }不会干扰渐变文字效果，因为-webkit-text-fill-color: transparent会优先覆盖该颜色设置。
• 添加标准的background-clip: text属性，可以让代码兼容更多现代浏览器。

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