直接用 background-clip: text 会失效，必须同时满足三条件：文字元素自身设置非纯色背景（如渐变或图片）、显式声明 color: transparent（及 -webkit-text-fill-color: transparent）、display 设为 inline-block 或 inline-flex；Firefox 完全不支持。
直接用 background-clip: text 会失效？先检查这三件事
绝大多数初学者第一次写镂空文字却看不到效果，不是代码错，而是漏了关键前提。最常踩的坑是：文字元素没背景、没设透明、或 display 不对。
-
background必须写在文字元素自身上（比如.title），不能只写在父容器——父容器的背景图不会被子元素的background-clip: text“剪”出来 -
color: transparent缺一不可；漏掉它，文字就显示为默认黑字，背景再花哨也透不出来 - 行内元素（如
）默认不支持background-clip: text，必须加display: inline-block或display: block
为什么 text-shadow 模拟镂空在图片背景上总糊成一团？
用多层 text-shadow 模拟轮廓，本质是“画边框”，不是真镂空。它依赖高对比背景才能看清边缘，一旦背景是图片，尤其带纹理或渐变时，阴影和背景混在一起，视觉上就是发虚、毛边、边界不清。
- 只适合纯色/高对比背景（比如深灰底+浅色阴影），不适合真实项目中常见的图片或复杂渐变背景
- 偏移值别超 ±1px，
blur设为0或1px；设成2px以上，边缘立刻发散 - 至少写 4 层（上下左右），少于 4 层会有方向性缺口，比如只写
1px 1px和-1px -1px，斜角处就露馅
-webkit-text-stroke 看起来干净，但上线前得确认用户用什么浏览器
这个方案真正靠谱：描边清晰、无锯齿、不依赖背景纹理。但它只在 Chrome、Safari、新版 Edge 里生效，Firefox 完全无视，旧版 Edge 也不认。
- 必须配
color: transparent，否则描边被实心文字盖住，等于白写 - 描边宽度建议 ≤ 1.5px；2px 以上小字号文字（比如
16px）容易笔画粘连，特别是中文“口”“日”这类封闭结构 - 别跟
text-shadow混用——描边本身已是轮廓，叠加阴影会让边缘变重、失真
背景是图片时，background-clip: text 渲染不稳定？试试 mix-blend-mode: multiply
当背景图是父容器设置的（比如 .hero { background-image: url(...); }），而你又不想把图重复写到每个标题上，mix-blend-mode: multiply 是更稳的替代路径。
- 原理是让文字区域“吃掉”背景：给文字加黑色背景 + 白色文字 +
mix-blend-mode: multiply，结果就是文字位置透出父背景，其余区域保持黑块 - 不用管
background-clip兼容性，Firefox 也能正常渲染 - 限制明显：只适用于深色背景图（或可调成深色的场景），如果父背景是浅色或白色，文字会消失——因为
multiply遇白即“消失”
真正难的不是写哪一行 CSS，而是判断当前项目要不要为 Firefox 用户降级、背景图是否可控、文字尺寸是否允许描边宽度。这些决策点藏在需求里，不在代码里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
