不能直接在同一个color: transparent元素上同时用background-clip: text和-webkit-text-stroke，因为描边会破坏渐变裁剪区域，导致Chrome/Safari中渐变消失、Firefox中描边不生效；可靠方案是伪元素分层叠加实现。
直接用 background-clip: text + -webkit-text-stroke 组合就能同时实现渐变色背景和描边，但必须注意：两者不能共存于同一元素上——描边会覆盖渐变，渐变会干扰描边颜色。实际要分层处理。
为什么不能直接在同一个 color: transparent 元素上加 -webkit-text-stroke
因为 -webkit-text-stroke 的作用机制是“在文字轮廓上绘制边框”，而 color: transparent + background-clip: text 是靠背景“透出”来显色。一旦启用描边，浏览器会优先渲染描边路径，把渐变背景裁剪区域破坏掉，最终只显示描边、看不到渐变。
- Chrome/Safari 中：描边生效，渐变消失（即使写了 background 也压不住）
- Firefox 中：
-webkit-text-stroke完全不识别，渐变能显示，但没描边 - 真实错误现象：
text-stroke值存在时，background-clip: text在部分版本 Safari 中直接失效
用伪元素叠加实现「渐变文字 + 描边」的可靠方案
核心思路：主元素负责渐变文字，::before 或 ::after 负责描边，通过绝对定位重叠。这样两者互不干扰，还能分别控制描边粗细、颜色、透明度。
- 主元素设
color: transparent+background: linear-gradient(...)+background-clip: text - 伪元素用相同文字内容（
content: attr(data-text)），设-webkit-text-stroke和color: transparent，再用z-index: -1或transform: translateZ(0)确保它在底层 - 必须加
position: relative到父容器，否则伪元素定位会错乱
.gradient-stroke {
position: relative;
font-size: 48px;
font-weight: bold;
color: transparent;
background: linear-gradient(90deg, #ff8a00, #e52e71);
-webkit-background-clip: text;
background-clip: text;
}
.gradient-stroke::before {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
-webkit-text-stroke: 2px rgba(0,0,0,0.3);
color: transparent;
z-index: -1;
}
HTML 中需写成：<div class="gradient-stroke" data-text="Hello">Hello</div>
立即学习“前端免费学习笔记（深入）”；
text-shadow 模拟描边的适用边界
当不需要精确描边路径（比如不要求等宽圆角、不介意轻微锯齿），且目标浏览器包含旧版 Firefox 或 iOS 14 以下设备时，text-shadow 是更轻量的降级方案。
- 四方向阴影（
-1px -1px,1px -1px,-1px 1px,1px 1px）可模拟 1px 描边 - 若要加粗到 2px，得补 8 个阴影（上下左右+斜角各两个偏移），性能开销明显上升
- 关键限制：无法实现「内描边」或「虚线描边」，颜色混合模式不可控（比如想让描边带透明度，阴影会相互叠加变深）
最易被忽略的一点：所有基于 background-clip: text 的方案，在 Safari 15.4 之前对 inline 元素支持极差，必须加 display: inline-block 或 display: block，否则渐变直接不渲染——这个 bug 至今未完全修复，尤其在 flex 容器中嵌套时。别省这行 CSS。
