-webkit-text-stroke 是实现镂空文字最直接方式，需 color: transparent 配合描边，且必须双写带前缀与无前缀版本；Firefox 119+ 才默认支持 text-stroke，旧版仅认 -webkit-；描边宽限绝对单位，中文建议≤1.5px并加粗；填色须用 -webkit-text-fill-color（WebKit专属），跨浏览器需 background-clip: text；渐变描边需纯色线性渐变，Safari 16.4+ 支持；描边宽度需随字体大小手动调整。
-webkit-text-stroke 是实现带边框文字镂空效果最直接的方式，但它不是“设个边框就完事”，而是靠 color: transparent + 描边层共同显形。现代浏览器（Chrome、Safari、Edge 79+、Firefox 119+）已支持无前缀 text-stroke，但生产环境仍需双写。
为什么只写 text-stroke 会失效
很多开发者复制了标准语法却没看到效果，本质是浏览器未启用该特性或解析路径不同：Firefox 直到 2023 年底才通过 layout.css.text-stroke.enabled 配置项默认开启，而旧版 Chrome/Safari 仅识别 -webkit-text-stroke。不加前缀等于白写。
- 必须同时声明：
-webkit-text-stroke: 2px #000和text-stroke: 2px #000 -
color必须为transparent；用rgba(0,0,0,0)或hsla()无效 - 描边宽度只接受绝对单位：
px、pt、em（相对计算后仍为固定像素），不支持rem动态缩放或百分比 - 中文笔画密集时描边易粘连，建议字体加粗（
font-weight: 700）并把描边控制在1.5px以内
-webkit-text-fill-color 和 color 的区别
当你要让镂空字内部填色（比如外圈白边+内圈蓝底），不能只改 color —— 它会被 color: transparent 覆盖。此时必须用 -webkit-text-fill-color 单独控制填充色，且它仅在 WebKit 内核下生效：
.hollow-title {
font-size: 4rem;
color: transparent;
-webkit-text-fill-color: #3498db; /* 内部实心色 */
-webkit-text-stroke: 2px white;
text-stroke: 2px white;
}
-
-webkit-text-fill-color优先级高于color，但不触发重排，也不影响布局流 - Firefox 不支持
-webkit-text-fill-color，若需跨浏览器填色，得换用background-clip: text方案 - 不要混用
text-shadow和text-stroke做“加粗描边”——text-shadow是模糊投影，边缘毛糙，高清屏下尤其明显
渐变描边和动态背景的配合要点
text-stroke 支持 linear-gradient() 作为颜色值，但不是所有渐变都可用：必须是纯色渐变（如 linear-gradient(to right, red, blue)），不能含透明度过渡或 radial 渐变。真正要让镂空区域透出背景动效，关键不在描边，而在父容器背景：
- 镂空文字本身不“透光”，只是把字形抠空；真正显示背景的是其父元素的
background - 若父容器用
background: linear-gradient(...)，镂空字会自然透出渐变，无需额外设置 - 想让描边也渐变？可以：
-webkit-text-stroke: 3px linear-gradient(45deg, #ff6b6b, #4ecdc4)，但 Safari 16.4+ 才稳定支持 - 避免在描边里写
transparent——-webkit-text-stroke: 2px transparent会导致整段文字不可见，不是“隐形描边”，而是描边层直接被跳过渲染
最易被忽略的一点：描边宽度和字体大小强相关。16px 字体设 2px 描边看着刚好，换成 80px 字体就得调到 4–5px，否则边缘细得断开。别依赖“自动缩放”，它不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
