如何实现带渐变描边的文本效果？

问题根源 #

你当前代码的问题在于：-webkit-text-stroke属性仅支持纯色值，无法直接使用渐变作为描边颜色，所以用变量传入渐变是不会生效的。

可行解决方案：伪元素叠加实现渐变描边 #

通过伪元素生成一层和原标题完全一致的文本，将伪元素设置为渐变描边效果并置于原文本下方，叠加后即可实现渐变描边的视觉效果。

完整代码示例 #

:root {
    --blue-purp-gradient: linear-gradient(45deg, #ea00ff, #1900ff);
} 

h1 {
    font-size: 52px;
    position: relative;
    /* 原文本：渐变填充效果 */
    background: var(--blue-purp-gradient);
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 伪元素作为渐变描边层 */
h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    /* 用背景裁剪实现渐变描边 */
    background: var(--blue-purp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px transparent; /* 仅保留描边轮廓 */
    z-index: -1; /* 置于原文本下方 */
}

使用步骤 #

• 给h1标签添加data-text属性，值与标题文本完全一致，例如：

  <h1 data-text="你的渐变描边标题">你的渐变描边标题</h1>
  

• 调整-webkit-text-stroke的数值可以修改描边的粗细

备选方案：双层文本嵌套 #

如果需要更直观的结构，可以直接用两个相同的文本元素分别实现描边和填充：

:root {
    --blue-purp-gradient: linear-gradient(45deg, #ea00ff, #1900ff);
} 

.title-container {
    position: relative;
    font-size: 52px;
}

.title-stroke {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--blue-purp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px transparent;
    z-index: -1;
}

.title-fill {
    background: var(--blue-purp-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

对应的HTML结构：

<div class="title-container">
    <span class="title-stroke">你的渐变描边标题</span>
    <span class="title-fill">你的渐变描边标题</span>
</div>

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