CSS如何实现移动端文字转阴影效果_通过text-stroke模拟描边

-webkit-text-stroke 是真正的文字描边属性，支持颜色与粗细，渲染干净但仅 WebKit/Blink 内核支持，需用 text-shadow 降级；应使用 em 单位、避免 px、确保对比度≥4.5:1。text-stroke 不是阴影，但能“假装”描边用 text-shadow 做描边效果不靠谱——它本质是模糊投影，放大后毛边明显，且无法控制内外边距。而 -webkit-text-stroke 是真正的描边属性，支持颜色+粗细，渲染干净，适合标题、Logo 文字等需要强轮廓的场景。但它有硬伤：仅 Safari 和 Chrome/Edge（基于 Blink）支持，Firefox 完全不认。所以不能单独用，必须搭配 text-shadow 降级。-webkit-text-stroke: 2px #000：只在 WebKit/Blink 内核生效，值为 width color，不支持虚线或渐变Firefox 下会直接忽略该声明，文字退回到纯色填充，毫无描边Android WebView 4.4+ 支持，但部分国产定制内核（如旧版 UC、QQ 浏览器 X5）可能漏掉前缀移动端适配要防缩放导致描边断裂文字缩放（比如用户双指放大、系统字体设置调大）会让 -webkit-text-stroke 的像素值失真：1px 描边在 2x 屏上可能变成 0.5px，渲染成半透明灰边甚至消失；在放大 200% 时又可能突然变粗、糊成一团。优先用相对单位：-webkit-text-stroke: 0.08em #333 比 2px 更稳，随字号缩放同步变化避免 font-size 使用 px，改用 rem 或 em，确保描边和文字比例一致在 iOS Safari 中，viewport 设置 user-scalable=no 会禁用双指缩放，但违背可访问性，不推荐兼容 fallback 必须写在 -webkit-text-stroke 前面CSS 解析是顺序覆盖的，如果把 text-shadow 写在 -webkit-text-stroke 后面，WebKit 浏览器会先画描边再叠阴影，结果是“描边+阴影”双重效果，视觉臃肿。正确顺序是让现代浏览器用描边，老浏览器/FF 用阴影兜底。 VWO 一个A/B测试工具