-webkit-text-stroke 是最可控、最易调试的镂空方案；需双写前缀与无前缀版本，color: transparent 为硬性前提，描边宽度仅支持 px/pt/em，中文字体建议 ≤1.5px 并搭配 font-weight: 700。
直接结论：-webkit-text-stroke 是最可控、最易调试的镂空方案；background-clip: text 看似“真镂空”，但 Firefox 不支持，且背景错位风险高，别盲目上。
-webkit-text-stroke 必须双写前缀和无前缀版本
只写 -webkit-text-stroke: 2px #fff 在现代 Chrome、Edge（Chromium 内核）里可能生效，但在 Firefox 119+（已默认启用）或 Safari 16.4+ 中会失效；反之，只写 text-stroke: 2px #fff 则旧版 Chrome/Safari 直接不认。必须同时声明：
.hollow {
color: transparent;
-webkit-text-stroke: 1.5px #000;
text-stroke: 1.5px #000;
}
-
color: transparent是硬性前提——用rgba(0,0,0,0)或opacity: 0都不行，前者被解析为不透明黑，后者让整个元素不可见 - 描边宽度只接受绝对单位：
px、pt、em（计算后固定），不支持rem或百分比 - 中文/日文等笔画密集字体，描边 ≥ 2px 易粘连，建议搭配
font-weight: 700并控制在1.5px以内
background-clip: text 在 Firefox 中完全无效
哪怕你写了 background-clip: text 和 -webkit-background-clip: text，Firefox（截至 2026 年稳定版）仍会忽略该值，文字保持实色。这不是 bug，是标准未实现。常见错误现象：
- 渐变背景写了，
color: transparent也设了，但文字仍是黑底白字——漏了-webkit-background-clip: text - 用图片背景时文字边缘出现锯齿或局部错位——
background-size没配好，建议用cover或200% 200%配合background-position: center - 父容器加了
transform或filter，Safari 渲染异常闪白——这是已知渲染层 bug，避免在镂空文字父级使用这些属性
mix-blend-mode: multiply 是唯一能真正“透出父背景”的方案
如果你的目标是让文字区域显示其**父容器的背景图/视频/渐变**（而非文字自身背景），background-clip: text 本质做不到——它裁剪的是元素自身的背景，不是父级的。此时 mix-blend-mode: multiply 才是正解：
.cutout-text {
background-color: black;
color: white;
mix-blend-mode: multiply;
}
- 原理是：白色文字 × 父背景 = 父背景原样呈现；黑色背景 × 父背景 = 更暗区域，形成“挖空”对比
- 兼容性比
background-clip: text更好（IE 不支持，但现代浏览器全覆盖） - 不能和
opacity混用——opacity会降级为 layer blending，破坏乘法逻辑 - 慎用于浅色背景：若父背景偏亮，
multiply效果会变弱，可换用screen模式（需同步调反颜色）
真正容易被忽略的点：没有“通用镂空”这回事。选 -webkit-text-stroke 就得接受它只是描边模拟；选 background-clip: text 就得接受它和 Firefox 无缘；选 mix-blend-mode 就得确保父背景足够有内容可透。三者不是升级关系，是不同约束下的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
