不能直接用 border-image 做文字边框，因文本节点不支持 border 及其切片逻辑；::before + background-clip:text 只能实现渐变文字而非轮廓描边；text-shadow 易致边缘毛刺且无法控渐变；推荐双伪元素+drop-shadow 或 svg/canvas 实现真正渐变描边。
为什么不能直接用 border-image 做文字边框
文字没有「边框区域」可映射：border-image 依赖元素的 border 框架，而文本节点本身不支持设置 border（设了也无效），更无法定义 border-image-slice 的切片逻辑。强行套用会静默失败，控制台无报错，但边框不出现。
::before 叠加渐变背景 + background-clip: text 的组合陷阱
常见错误写法是让 ::before 绘制渐变、再用 background-clip: text 裁剪到文字形状——这只能做出「渐变文字」，不是「文字边框」。真正要的是文字轮廓线带渐变，而非文字内部填色。
- 必须分离「文字内容」和「轮廓描边」：主元素负责显示纯色文字（或透明文字），
::before负责绘制一个稍大的渐变轮廓 -
background-clip: text只对自身生效，不能作用于伪元素生成的轮廓；它只裁剪「该元素自身的 background」到文字区域 - 若用
text-shadow模拟边框，多层阴影叠加后颜色浑浊、边缘毛刺，且无法实现平滑渐变方向控制
可行方案：双层伪元素 + filter: drop-shadow() 模拟渐变描边
核心思路是绕过「描边」本身不可控的问题，转而用阴影做「可控外扩轮廓」，再用渐变背景+遮罩制造渐变感。实际只需一个 ::before：
- 主元素设
color: transparent，确保文字本身不遮挡后续效果 -
::before使用content: attr(data-text)复制文字内容，设大字号（如font-size: 1.2em），并应用background: linear-gradient(...) - 关键一步：给
::before加-webkit-background-clip: text+color: transparent，让它变成「渐变文字」 - 再叠加一层
filter: drop-shadow(0 0 2px #000)——但注意，纯色 shadow 不行；需配合background: conic-gradient(...)和动画，让 shadow 的「源色块」本身在旋转，视觉上形成渐变流动边框
示例最小配置：
h1 {
position: relative;
color: transparent;
}
h1::before {
content: attr(data-text);
position: absolute;
inset: 0;
background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #44b3a2);
-webkit-background-clip: text;
color: transparent;
animation: rotate 8s linear infinite;
}
@keyframes rotate {
to { background-position: 360deg; }
}
圆角文字边框？别硬撑，换 SVG 或 Canvas
CSS 伪元素无法可靠生成带圆角的「文字描边」——文字笔画本身无几何路径，border-radius 对 ::before 文本无效；stroke 属性只在 SVG <text></text> 中原生支持。如果项目允许引入 SVG：
- 把文字转为
<svg><text stroke="url(#grad)" stroke-width="2">Hello</text><defs><lineargradient id="grad">...</lineargradient></defs></svg> - 或用
canvas动态绘制，通过ctx.strokeStyle = gradient+ctx.strokeText()精确控制描边粗细与渐变方向
伪元素方案在小字号、直角文字下尚可应付；一旦涉及中文字体、连笔、斜体或圆角需求，立刻暴露底层限制——这不是写法问题，是 CSS 渲染模型的边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
