background-clip: text需同时满足color: transparent、-webkit-background-clip: text和display: inline-block三条件才生效；firefox不支持，须降级处理。
直接用 background-clip: text 配合 color: transparent 是目前最接近“真镂空”的方案，但 Firefox 完全不支持，不能当作默认方案用。
为什么 background-clip: text 写了却没效果？
它不是“写了就生效”的属性，必须同时满足三个硬条件：
-
color: transparent—— 不能用rgba(0,0,0,0)或opacity: 0，后者会让整个元素不可见 -
-webkit-background-clip: text必须显式声明，Safari 和旧版 Chrome 只认这个前缀 - 元素得是
inline或inline-block（比如加display: inline-block），block元素默认不触发裁剪
常见错误：背景用了图片但没设 background-size: cover 或 center，导致文字区域只露出图中一小块色块，看起来像失效。
-webkit-text-stroke 怎么配才不糊、不粘连？
这是兼容性最好、控制最稳的方案，但中文/小字号下容易出问题：
- 描边宽度建议 ≤1.5px（中文笔画密），并配合
font-weight: bold防止断笔 - 必须双写：
-webkit-text-stroke: 1.2px #fff和text-stroke: 1.2px #fff；Firefox 119+ 才默认启用无前缀版本 - 不要混用
text-shadow—— 描边本身已是轮廓，叠加阴影会让边缘发虚、高清屏上尤其明显 - 想填色？用
-webkit-text-fill-color: #3498db，但注意它只在 WebKit 内核下生效，Firefox 里无效
纯 CSS 模拟镂空：用 text-shadow 的实操边界
这不是真正镂空，而是靠多层阴影“围出”文字形状，依赖高对比背景才能看清：
- 至少叠 4 层：比如
text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff - 偏移值严格控制在 ±1px，
blur设为0或1px，大了就糊，小了就露底色 - 背景必须有纹理或渐变，纯白/纯黑背景上几乎看不出镂空感
- 移动端 Safari 对多层
text-shadow渲染压力大，长段落可能掉帧
真正难的不是写哪一行代码，而是判断当前项目要不要支持 Firefox —— 如果要，就得放弃 background-clip: text 和 text-stroke，改用伪元素错位法（兼容全浏览器但维护成本高）；如果只跑 Chromium/Safari，优先用 text-stroke，它最可控、最不挑背景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
