-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测试工具
相关推荐
iAm_Ike3 小时前
Go 中自定义类型与基础类型间的显式类型转换详解iuvtsrt3 小时前
Golang怎么实现方法集与接口的匹配_Golang如何理解值类型和指针类型实现接口的区别【详解】旦莫4 小时前
AI驱动的纯视觉自动化测试：知识库里应该积累什么知识内容tongluowan0074 小时前
MySQL中列数量及长度-liming-5 小时前
单片机设计_串口调试工具鹿角片ljp5 小时前
从告警检测到智能研判：SQL 注入研判模型的设计与实践知识领航员5 小时前
蘑兔AI音乐深度实测：功能拆解、实测表现与适用场景小新同学^O^6 小时前
简单学习 --＞ Spring事务前进的李工6 小时前
MySQL慢查询日志优化实战如何原谅奋力过但无声6 小时前
【灵神高频面试题合集06-08】反转链表、快慢指针（环形链表/重排链表）、前后指针（删除链表/链表去重）