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-scalableno 会禁用双指缩放但违背可访问性不推荐兼容 fallback 必须写在 -webkit-text-stroke 前面CSS 解析是顺序覆盖的如果把 text-shadow 写在 -webkit-text-stroke 后面WebKit 浏览器会先画描边再叠阴影结果是“描边阴影”双重效果视觉臃肿。正确顺序是让现代浏览器用描边老浏览器/FF 用阴影兜底。 VWO 一个A/B测试工具