-webkit-text-fill-color单独无法实现镂空效果，因其仅控制文字填充色，设为transparent后文字消失；必须搭配-webkit-text-stroke描边才能显形空心字，且需color: transparent配合，缺一不可。
为什么 -webkit-text-fill-color 单独用不出镂空效果
-webkit-text-fill-color 本身只是控制文字填充色的前缀属性，它不会“镂空”文字——它只决定文字内部填什么颜色。如果没配其他属性，它和标准 color 行为几乎一致，设成 transparent 后文字就真没了（连描边都没有），根本看不到轮廓。
常见错误是以为写了 -webkit-text-fill-color: transparent 就万事大吉，结果页面一片空白。真正起镂空作用的是描边，不是这个填充色属性。
- 必须搭配
-webkit-text-stroke才能显形（描边画出轮廓） - 不能只依赖
-webkit-text-fill-color，它没有独立实现镂空的能力 - Firefox 完全忽略该属性，仅 Safari/Chrome 有效，但不写它也不影响描边生效
-webkit-text-stroke 怎么写才真正显示空心字
核心逻辑就一条：填充透明 + 描边可见 = 空心字。缺一不可。
下面这段是目前最稳妥的写法：
h1 {
color: transparent;
-webkit-text-stroke: 1.2px #fff;
text-stroke: 1.2px #fff;
}
-
color: transparent是硬性前提，不是可选；用opacity: 0会把描边也隐藏掉 - 必须双写：
-webkit-text-stroke（Safari ≤16.3 必需）+text-stroke（Firefox ≥119+ 开始支持，但尚未全量启用） - 中文字体建议描边 ≤1.5px，否则小字号下笔画粘连、边缘糊成一团
- 描边颜色要和背景有足够对比度，否则看起来像“发虚”而不是“镂空”
为什么 background-clip: text 不等于“透视父级背景”
很多人误以为给文字加了 background-clip: text 就能直接看到背后的大图，其实不是。
这个属性裁剪的是**当前元素自身的背景**，不是父容器的背景。如果你没给文字元素设 background-image 或渐变，那它裁了个寂寞——透明区域还是透明，底下啥都透不出来。
- 正确用法：先给文字元素设置和父容器一致的背景（比如用
background-image: inherit，但注意兼容性差） - 更可靠的做法是把背景图设在文字元素上，并用
background-size: cover; background-position: center;对齐 - IE 和 Firefox 旧版本完全不支持
background-clip: text，降级后文字直接变成纯色块 - 响应式场景下，文字缩放时背景图容易错位，需要配合
background-size: 100% 100%或视口单位微调
哪些场景下该放弃 CSS 镂空，改用 SVG
当遇到这些情况时，CSS 方案基本失效，SVG 是更可控的选择：
- 需要精确控制每个笔画的描边宽度或端点样式（比如圆头/方头）
- 文字要沿路径弯曲、做 3D 倾斜，或叠加滤镜（如
feMorphology膨胀/腐蚀） - 目标环境包含大量 IE11 或旧版 Android WebView（
-webkit-text-stroke在 Android 4.4 及以下无效） - 设计师给的镂空效果带内阴影、多层描边或非均匀描边（CSS 只支持单层 uniform stroke）
SVG 的 <text></text> 元素支持 fill="none" + stroke + stroke-width 组合，语义清晰、渲染稳定，且可通过 <use></use> 复用，比拼凑 CSS 属性更接近“真实镂空”的意图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
