-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测试工具
相关推荐
cup113 小时前
[技术复盘] Windows Python 打包实战：Nuitka 环境踩坑总结与 CI 自动化构建全指南aqi005 小时前
15天学会AI应用开发（七）有了大模型为什么还要引入RAG金銀銅鐵7 小时前
用 Python 实现 Take-Away 游戏copyer_xyf7 小时前
Agent 流程编排copyer_xyf8 小时前
Agent RAGcopyer_xyf8 小时前
【RAG】向量数据库：milvuscopyer_xyf8 小时前
Agent 记忆管理星云穿梭1 天前
用Python写一个带图形界面的学生管理系统——完整教程金銀銅鐵1 天前
用 Pygame 实现 15 puzzle