color: transparent是实现文字镂空的硬性前提，因-webkit-text-stroke仅描边不控填充，不设透明则默认色覆盖描边；rgba(0,0,0,0)和opacity: 0均无效，前者仍触发填充逻辑，后者使描边一同消失。
color: transparent 是实现文字镂空的硬性前提，只靠描边属性本身无法“挖空”文字——它只是加边框，不改填充。
为什么 color: transparent 不可省略？
描边属性（如 -webkit-text-stroke）本身不控制文字内部颜色；它只绘制轮廓。若不设 color: transparent，文字本体仍按默认色（通常是 color: black 或继承色）渲染，结果是“黑字+黑边”，完全看不出镂空。
rgba(0,0,0,0) 或 opacity: 0 都不行：前者被解析为透明黑，但部分浏览器仍会触发填充逻辑；后者让整个元素（含描边）透明，描边也消失了。
-
color: transparent明确告诉渲染引擎“文字主体不绘制”，只保留描边路径 - 必须和描边声明写在同一选择器里，不能靠继承或层叠覆盖
- 不要混用
-webkit-text-fill-color: transparent替代——它在 Firefox 中被忽略，且语义上是“填充色”，不是主体色
-webkit-text-stroke 和 text-stroke 必须双写
Chrome 115+、Firefox 119+、Edge 116+ 已支持标准 text-stroke，但 Safari（尤其是 iOS）至今只认 -webkit-text-stroke。漏掉任一，就会在对应浏览器里退化成实色文字。
- 写法必须严格一致：
-webkit-text-stroke: 1.5px #000和text-stroke: 1.5px #000 - 单位只能是
px、pt或无单位数值（如2等价于2px）；rem、%、em（除极少数场景外）会被直接忽略 - 描边颜色支持
linear-gradient(to right, red, blue)，但仅限纯色线性渐变；含transparent或径向渐变会回退为单色
中文/小字号下描边宽度怎么选？
中文笔画密集，描边太粗容易粘连，太细则边缘发虚。没有固定公式，得看字号和字体。
- 14–20px 字号：建议 ≤
1.5px，并搭配font-weight: 700缓解粘连 - ≥ 4rem（约 64px）：需手动调至
2px～3px，否则高清屏下描边变细、边缘模糊 - 避免用
text-shadow模拟描边来“补兼容”——叠加多层阴影会导致边缘毛糙，尤其在 Retina 屏上明显 - 想填色？别动
color，用-webkit-text-fill-color单独设填充色；但它在 Firefox 中无效，跨浏览器填色得换background-clip: text方案
真正难的不是写出那几行 CSS，而是判断当前项目要不要为 Safari 17.6（2026 年最新稳定版）和 Firefox 127 的细微差异做额外适配——比如是否接受渐变描边在 Safari 中降级为单色，或者能否放弃 iOS 16 以下设备的镂空效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
