CSS 渐变文本周围的黑色轮廓问题

Question

我正在尝试使用 CSS 创建具有渐变效果的文本，但我注意到字母周围有黑色轮廓，这不是所需的效果。这是我正在使用的 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%) no-repeat,
                linear-gradient(27deg, #000000 0%, #000000 100%) no-repeat;
    background-size: 125% 100%, 100% 100%;
    background-position: 0% 50%, 0% 50%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 2px;
    background-repeat: no-repeat;
}

您可以在我的 CodePen 上看到此问题的示例：https://codepen.io/Smartson/pen/wvVdWjV

我想知道如何删除这个黑色轮廓，同时保留文本上的彩色渐变。您有什么建议来解决这个问题吗？

预先感谢您的帮助！

我尝试过使用文本阴影和文本描边，但他们还没有解决问题。

Answer 1

您遇到的问题可能是由于背景属性中的第二个线性渐变造成的，它会创建黑色覆盖层，可能会导致渐变文本周围出现黑色轮廓效果。

这是 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;
            -webkit-text-fill-color: transparent;
            padding: 0 2px;
            background-repeat: no-repeat;
        }

主要变化：

我删除了第二个线性渐变（带有#000000的那个），这可能是造成黑色轮廓效果的原因。 -webkit-background-clip：文本；和-webkit-text-fill-color：透明；保留属性以确保文本仅显示渐变背景而没有任何填充颜色。