-webkit-text-stroke需配合color: transparent才能实现镂空效果，单独使用仅添加描边；它仅支持-webkit-前缀，firefox不支持，须用background-clip:text等方案降级。
-webkit-text-stroke 是实现带边框的镂空文字最直接、兼容性相对可控的方式，但它本身不产生“镂空”，而是靠配合 color: transparent 才能露出背景、形成视觉上的镂空感。单独用它只会给实心文字加描边。
为什么 -webkit-text-stroke 必须搭配 color: transparent
描边属性只控制文字轮廓的粗细和颜色，不改变文字填充；如果文字本身是不透明的（比如默认黑色），描边就会叠在实心字上，看起来像加粗+描边，不是镂空。只有把文字内容“挖空”——即设为 color: transparent，再用描边勾勒出轮廓，背景才能透出来。
-
-webkit-text-stroke本身无标准前缀，目前仅支持-webkit-前缀（Chrome/Safari/Edge 新版） - Firefox 完全不支持该属性，需 fallback 方案（如
background-clip: text+text-fill-color: transparent） - 描边宽度为
0时，等效于无描边；设为1px以上才可见
-webkit-text-stroke 的参数写法与常见错误
语法是 -webkit-text-stroke: <stroke-width><stroke-color></stroke-color></stroke-width>，两个值必须同时出现，不能省略颜色（即使想用当前文字色，也得显式写 currentColor）。
- 错误写法：
-webkit-text-stroke: 2px;→ 浏览器忽略整条声明 - 正确写法：
-webkit-text-stroke: 2px #000;或-webkit-text-stroke: 1.5px currentColor; - 不支持百分比、em 等相对单位作描边宽，只接受绝对长度（
px、rem等） - 描边会随字体缩放而缩放，但过细（如
0.5px）在高 DPR 屏幕可能渲染异常或消失
Firefox 兼容性 fallback：用 background-clip: text 替代
当需要在 Firefox 中也显示镂空效果时，不能只依赖 -webkit-text-stroke。更稳妥的做法是双保险：先用 background-clip: text + text-fill-color: transparent 实现基础镂空，再叠加 -webkit-text-stroke 加描边（仅 WebKit 内核生效）。
-
background-clip: text仍需-webkit-前缀（-webkit-background-clip: text），且必须配合color: transparent或-webkit-text-fill-color: transparent - 描边和裁剪叠加时，
-webkit-text-stroke会画在文字轮廓上，而background-clip控制的是填充区域，二者不冲突 - 注意：若同时用了
text-shadow，阴影会出现在描边外侧，可能干扰镂空观感，建议禁用或设为none
实际可用的最小兼容代码块
这段代码在 Chrome/Safari/Edge 中显示带黑边的镂空字，在 Firefox 中显示无边镂空字（可用背景图/渐变增强表现）：
h1 {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #000;
/* Firefox fallback：无描边，但保持镂空 */
background-clip: text;
color: transparent;
}
真正难处理的不是描边本身，而是当文字使用非系统字体（如自定义 @font-face）时，描边在不同字号下的像素对齐表现不一致——小字号下描边容易发虚或断裂，这是 WebKit 渲染层的限制，没有 CSS 修复手段，只能靠字体选型或 SVG 替代兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
