-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测试工具
相关推荐
ai大模型-探索者21 分钟前
Milvus向量数据库（介绍与使用）minglie127 分钟前
zynq联网配置小羊没烦恼！1 小时前
深入浅出SQL Server中的死锁夜晚回家1 小时前
Python 赋值运算符详解 | 从 = 到 +=，一张记账单讲清复合赋值Maya动画技术1 小时前
pptx批量转png图片工具我不会插花弄玉1 小时前
9. 表的内连和外连【由浅入深-MySQL】Techblog of HaoWANG1 小时前
Ubuntu 下将 Ollama 服务配置为监听 0.0.0.0:11434 完整实践MoRanzhi12032 小时前
第4篇 · 使用 PyQt5 实现 2048：平滑动画与性能优化