嘿，这个需求我刚好研究过！要同时搞定渐变填充和渐变描边的文字，核心是用伪元素叠加的思路——毕竟原生CSS的text-stroke只能用纯色，没法直接加渐变，咱们用两个层级的文字叠加就行，一个做描边，一个做填充。

具体实现方案 #

1. HTML结构 #

先准备一个带自定义属性的文本元素，方便伪元素复用内容：

<h1 data-text="渐变文字示例">渐变文字示例</h1>

2. CSS核心代码 #

/* 基础样式重置 */
h1 {
  font-size: 6rem;
  font-weight: bold;
  position: relative; /* 让伪元素基于它定位 */
}

/* 原元素：渐变填充文字 */
h1 {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1; /* 让填充文字在描边之上 */
}

/* 伪元素：渐变描边文字 */
h1::before {
  content: attr(data-text); /* 复用原元素的文本内容 */
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #1a535c, #f7fff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px transparent; /* 关键：设置描边宽度，颜色透明 */
  z-index: -1; /* 描边在底层 */
}

关键细节解释 #

• 伪元素复用内容：用attr(data-text)可以让伪元素和原元素文本保持一致，不用重复写内容，修改起来更方便。
• 层级控制：通过z-index让填充文字覆盖在描边文字之上，这样就能同时看到两种渐变效果。
• 渐变描边的实现：给伪元素设置-webkit-text-stroke的宽度，然后用渐变背景+background-clip: text，相当于把渐变“填”进描边的区域里，因为文字本身是透明的（text-fill-color: transparent），所以只显示描边的渐变效果。

你可以调整渐变的颜色、角度，还有描边的宽度（-webkit-text-stroke的数值），来适配你的设计需求。这个方法在主流浏览器里都能正常工作，只需要注意加上webkit前缀就行。

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