-webkit-text-fill-color: transparent 必须与 -webkit-text-stroke 配合才能实现空心文字，单独使用会使文字完全透明消失；因该属性仅控制填充色，不提供描边，无轮廓则不可见。
-webkit-text-fill-color: transparent 单独用没效果，它必须和 -webkit-text-stroke 配合才能实现空心文字。只设这个属性，文字会直接消失（变成全透明），而不是“留边镂空”。
为什么-webkit-text-fill-color: transparent不能单独用
这个属性只是把文字的“填充色”设为透明，但不提供任何描边或轮廓。它本质是覆盖默认的 color 值，属于 WebKit 私有填充控制，不是独立渲染层。浏览器一旦执行，就只剩一个透明形状——没有边，没有影，什么也看不见。
常见错误现象：
写了 -webkit-text-fill-color: transparent，文字没了；加了 color: transparent 也没用；检查 computed styles 发现 color 是 transparent，但没描边，自然空。
- 必须搭配
-webkit-text-stroke: <width><color></color></width>才能显形 - 不能和
opacity: 0混用——那会让整个元素不可见，包括描边 - 不要用
rgba(0,0,0,0)替代transparent，部分旧版 Safari 对 rgba 透明填充支持异常
-webkit-text-stroke 的参数怎么配才靠谱
描边宽度和颜色直接影响可读性，尤其对中文字体。小字号（≤24px）下，描边超过 1.5px 容易糊边、笔画粘连；大标题可用 2–3px，但需同步加大 letter-spacing 防止拥挤。
- 中文推荐：宽度 ≤1.5px，颜色选高对比色（如深底用
#fff，浅底用#000） - 英文/数字容忍度更高，
2px描边较稳妥 - 避免用模糊值（
-webkit-text-stroke不支持 blur） - 渐变描边不可行——该属性只接受单色，
linear-gradient()会被忽略
Firefox 和 Edge 用户看到的是空白？得降级
-webkit-text-stroke 在 Firefox（所有版本）、旧版 Edge（≤18）完全无效，且无标准替代属性。如果只写这一套，这些用户看到的就是透明块——不是镂空，是丢字。
- 最轻量 fallback：用
color: #333+text-shadow模拟粗边（例如text-shadow: 0 0 2px #000），至少保证可读 - 别依赖
@supports (-webkit-text-stroke: 1px black)，Firefox 会假阳性匹配（报支持但实际不渲染） - 真要保兼容又想要镂空感，得用伪元素双层叠加法——底层描边文字 + 顶层略小实色文字错位盖住中心
移动端 Safari 渲染不稳定？检查 display 和父容器
iOS Safari（尤其是 iOS 16+）对 -webkit-text-stroke + transparent 组合在动态内容或滚动容器里偶发闪白、重绘失败。根本原因常是渲染层未被正确触发。
- 强制启用硬件加速：
transform: translateZ(0)或will-change: transform - 确保文字容器是
display: inline-block或inline-flex，纯inline元素在某些缩放比例下描边会断裂 - 避开父级
filter（如blur()、drop-shadow()），它们会禁用描边渲染管线 - 长段落慎用——iOS 上超过 3 行文本 + 大描边时，GPU 渲染压力明显上升，可能掉帧
真正难的不是写出镂空，而是让不同浏览器、不同字体、不同字号下都稳稳“露边不糊、透底不虚”。描边宽度、背景对比、渲染上下文——三者缺一不可，漏调一个，用户看到的就是一片空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
