background-clip: text 必须配合 color: transparent（及 -webkit-text-fill-color: transparent）才能生效，否则文字仍为实色覆盖背景；还需 -webkit-background-clip: text 前缀、display: inline-block 且元素自身需有 background（如渐变或图片）。
background-clip: text 必须配 color: transparent 才生效
只写 background-clip: text，文字还是实心的——这是最常踩的坑。它本身不“镂空”，只是把元素背景裁剪成文字形状；如果文字颜色没设为透明，就会盖住背后裁剪出来的背景。
必须同时设置：color: transparent（或 -webkit-text-fill-color: transparent），否则等于白写。
-
color: transparent是通用写法，但部分旧版 Safari 要求-webkit-text-fill-color: transparent，建议两者都写 - 不能只依赖
background-clip: text就以为完事，漏掉透明色 = 效果完全不可见 - 如果用了
text-shadow或-webkit-text-stroke，也要确认它们没和color: transparent冲突（比如描边被文字色覆盖）
文字元素必须自带 background，不能靠父级背景“透过来”
background-clip: text 裁剪的是**当前元素自身的 background**，不是父容器的背景。指望它直接露出 body 的图片背景？不行。
常见错误是给 <span></span> 加了 background-clip: text，却没给它设 background，结果一片空白。
- 必须显式声明
background：可以是linear-gradient()、url(...)，甚至video元素的 poster 帧 - 若想模拟“透出父级背景”，得用 JS 同步父级背景位置到子元素，或用伪元素 +
mix-blend-mode（但 Firefox 不支持mix-blend-mode在 text 上） - 纯色背景（如
background: #fff）+color: transparent= 看不出镂空，因为没有纹理/渐变可“露出来”
display 值必须是 inline 或 inline-block
块级元素（display: block）下 background-clip: text 会失效——浏览器不渲染裁剪行为。
原因在于该属性只对“内联上下文中的文本”起作用，块级容器默认不触发文本裁剪逻辑。
- 推荐用
display: inline-block，兼顾布局控制与兼容性 -
display: inline-flex也行，但需注意 flex 项默认不换行，可能影响多行文字 - 绝对定位或 transform 不影响此限制，但 display 值仍要合规
- 移动端 Safari 对大段文字（尤其 font-size > 4rem）偶发重绘错位，可加
will-change: transform缓解
Firefox 完全不支持，降级方案不能只靠 color fallback
Firefox 从 2015 年至今未实现 background-clip: text，连前缀版 -webkit-background-clip: text 也无效。仅靠 color: white fallback 不够——用户看到的可能是实心白字，而非“镂空失败”的提示。
真正可用的降级思路是视觉等效，而非样式回退。
- 用
@supports not (background-clip: text)区分支持状态，给 Firefox 提供-webkit-text-stroke描边方案（需搭配color: transparent） - 若描边也不支持（如老 Edge），改用多层
text-shadow模拟轮廓：偏移 ±1px、blur=0，4–8 层覆盖 - 避免在关键文案上强依赖该效果；复杂背景（如视频、动态渐变）更应预设静帧 fallback 图片
background-clip: text 的固有行为——它裁的是当前元素盒模型内的背景，不是“穿透式取景”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
