-webkit-text-stroke是WebKit内核专属非标准属性，仅Chrome、Safari、新版Edge支持，Firefox完全不支持；必须配合color: transparent或-webkit-text-fill-color使用，否则文字不可见，且不支持多层描边或响应式缩放。
-webkit-text-stroke 能给文字加硬边描边，但不是所有浏览器都支持，也不能替代 SVG 或 Canvas 的精细控制；它适合标题、图标文字这类对兼容性要求不高、需快速实现轮廓效果的场景。
为什么 -webkit-text-stroke 有时没反应
最常见原因是：该属性只在 WebKit 内核浏览器（Chrome、Safari、Edge 新版）中生效，Firefox 完全不支持，且必须配合 color 或 text-fill-color 使用——如果只设描边不设填充色，文字会“消失”。
- 必须显式设置
color: transparent或text-fill-color: transparent，否则描边会被实心填充盖住 - 不能和
text-shadow混用追求“多重描边”，-webkit-text-stroke本身不支持多层，叠加text-shadow易导致边缘发虚或偏移 - 在使用
font-smoothing: antialiased或-webkit-font-smoothing: subpixel-antialiased的页面里，描边可能被抗锯齿柔化，看起来变细或模糊
-webkit-text-stroke 的参数怎么配才不翻车
它的语法是 -webkit-text-stroke: ，两个值缺一不可。宽度单位推荐用 px，避免用 em 或 rem 导致响应式下描边粗细失控。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 描边宽度建议 ≤
2px：超过后容易在小字号（如14px）下吞掉字形细节，尤其对「i」「l」「j」等窄字符 - 颜色别用纯黑配深底：
-webkit-text-stroke: 1px #000在暗色背景上对比度爆炸，改用rgba(0,0,0,0.7)更稳 - 想模拟“镂空”效果？用
color: transparent+-webkit-text-stroke: 1px #ff6b35，但注意 Safari 15.4+ 才稳定支持transparent填充
和 text-shadow 描边对比，什么时候该选谁
text-shadow 兼容性好（IE9+），但它是“投影”，本质是位移+模糊，没法做到紧贴字形的锐利边缘；-webkit-text-stroke 是真·轮廓，像素级对齐，但只活在 WebKit 里。
- 要做营销 banner 大标题、且确定用户用 Chrome/Safari？直接上
-webkit-text-stroke，清晰省事 - 要兼容 Firefox 或需支持旧版 Edge？老实用
text-shadow: 0 0 1px #000, 0 0 1px #000叠两层模拟，但得接受边缘略毛 - 需要描边随缩放自适应（比如用
vw字号）？-webkit-text-stroke的px宽度不会缩放，此时text-shadow的px同样失效，得切 SVG 文字
真正难处理的是中文字体——不同字体的笔画密度差异极大，同一套 -webkit-text-stroke: 1px 在「思源黑体」上刚好，在「站酷小薇体」上可能糊成一团。上线前务必在目标字体、字号、背景色组合下实机截图验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
