描边填充文字（悬停渐变填充 CSS 源码）

效果演示（真实可交互）

下方「描边填充 OUTLINE」默认是灰色描边的空心字，把鼠标移上去，描边逐渐淡出，露出底下蓝紫渐变填充的实心字，像墨水滴进空字模。下拉框可以切换蓝紫渐变、青绿渐变、橙红渐变三套填充主题；勾选「自动呼吸填充」后不再需要悬停，描边会以 2.6 秒周期循环淡入淡出，让填充色「呼吸」般地显现。

完整代码

HTML 结构：两层完全相同的文字用网格堆叠（底层渐变填充、顶层描边）：

<div class="of-box" id="ofBox">
  <span class="of-layer of-fill" id="ofFill">描边填充 OUTLINE</span>
  <span class="of-layer of-stroke" id="ofStroke">描边填充 OUTLINE</span>
</div>

核心 CSS：.of-fill 是渐变实心层，.of-stroke 是透明填充 + 描边层，悬停时描边层淡出：

.of-box { display: inline-grid; }
.of-layer { grid-area: 1 / 1; }
.of-fill {
  color: transparent;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #6c8cff, #a96cff);
}
.of-stroke {
  color: transparent; -webkit-text-stroke: 2px #8a93a6;
  transition: opacity .5s ease;
}
.of-box:hover .of-stroke { opacity: 0; }   /* 悬停露出填充层 */

自动呼吸模式用关键帧循环控制描边层透明度：

.of-box.loop .of-stroke { animation: ofBreathe 2.6s ease-in-out infinite; }
@keyframes ofBreathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

参数说明

兼容性与性能

• -webkit-text-stroke 在 Chrome / Safari / Firefox / Edge 均支持（Firefox 自 49 起支持该前缀写法）
• 双层文字各占一个绘制层，悬停只过渡顶层 opacity，属合成属性，性能良好
• 渐变填充依赖 background-clip: text，不支持时底层会显示透明字，建议外层 @supports 兜底为实色
• 描边宽度超过 3px 时笔画内部会出现镂空，适合做巨型标题的粗描边艺术字

常见问题

Q: 描边字在 Firefox 上显示为纯色没有描边？ 现代 Firefox 已支持 -webkit-text-stroke；早期版本可用 @supports (-webkit-text-stroke: 1px black) 判断并降级为实色文字。

Q: 想让填充从下往上「长」出来而不是淡出？ 把描边层改为 clip-path: inset(100% 0 0 0) 并在悬停过渡到 inset(0)，即可实现自上而下的裁切填充。

Q: 呼吸循环和悬停同时开启会冲突吗？ 组件已处理：开启循环时动画接管描边层，悬停过渡被覆盖，不会双重触发。

Q: 可以商用吗？ 可以，粤喵自研原创组件，免费商用无需署名。