text-shadow多方向零模糊叠加是按钮外描边最可靠的选择，因其在chrome、firefox、edge、safari全线兼容，通过±1px整数偏移、blur-radius为0的4–8层阴影均匀包围文字轮廓，而-webkit-text-stroke在firefox和旧edge中完全不解析。
直接用 text-shadow 多方向零模糊叠加，是目前唯一能在 Chrome、Firefox、Edge、Safari 全线稳定生效的外描边方案；-webkit-text-stroke 在 Firefox 和旧 Edge 中完全不解析，不能作为主方案。
为什么 text-shadow 是按钮外描边最可靠的选择
所谓“外描边”，本质是让文字轮廓被均匀包围，视觉上脱离背景独立出来。CSS 没有原生的“外描边”属性，text-shadow 通过硬边偏移（blur-radius 为 0）模拟这个效果，且所有现代浏览器都按相同逻辑渲染。
- 只写一个方向（如
text-shadow: 1px 1px 0 #000）会导致右下角单侧加粗，不是描边，是错位投影 - 小字号按钮（≤24px）推荐 4 方向：
-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 - 中大字号或需饱满感，补上正交方向，共 5 层：
0 0 0 #000, -1px 0 0 #000, 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000 - 所有偏移值必须是整数
px，且blur-radius严格为0；写成0.1px或漏掉0，边缘就会发虚
使用 -webkit-text-stroke 的前提和陷阱
-webkit-text-stroke 看似简洁，但它是 WebKit/Blink 专属私有属性，在 Firefox 中会被直接忽略——不是渲染异常，是根本不识别这条声明。
- 必须搭配
color: transparent才能显形；若同时设color: white，描边会被前景色盖住，等于没加 - 不能和
text-shadow混用：WebKit 下两者叠加，描边变重、边缘糊化 - 无法控制描边位置（只能居中），也不支持渐变色或动画路径
- 高清屏（dpr ≥ 2）下，
1px偏移实际渲染可能只有 0.5 物理像素，需用媒体查询按 dpr 补偿，比如对 dpr=2 设备改用-0.5px偏移
如何安全降级并兼顾主题切换
不要靠 JavaScript 判断 UA，用 @supports 检测特性更准确、更未来兼容。
- 先写通用
text-shadow版本作为兜底 - 再用
@supports (-webkit-text-stroke: 1px #000)包裹 WebKit 专属规则（注意：不能写text-stroke，它不存在） - 若需动态换色，把描边色和宽度抽成 CSS 变量：
--stroke-color和--stroke-width，在@supports块内引用 - 避免用
em或rem做描边单位：字体缩放时偏移会失准，坚持用px
别踩这些真实项目里高频出问题的坑
描边看着简单，但在按钮这种高频交互元素上，细节错一点就全盘失效。
-
text-shadow在 hover 动画中频繁重绘时性能略高，若按钮带 transform 或 opacity 动画，建议关掉描边过渡（transition: none）或改用伪元素方案 - 按钮若用了
font-smoothing: antialiased或-webkit-font-smoothing: subpixel-antialiased，可能和描边冲突，导致边缘锯齿或颜色溢出 - 如果按钮文字用了
text-transform: uppercase，某些字体在小字号下连接处（如 “W”、“M”）容易露白，此时 4 方向不够，必须上 8 方向补全 - Safari 15.2 及更早版本对 inline 元素的描边渲染不稳定，确保按钮是
display: inline-block或block，别依赖默认inline
真正难的不是写出描边，而是让它在各种字号、DPR、字体、状态切换下都保持清晰一致；多数人卡在“看起来差不多”，而线上按钮往往要扛住 Retina 屏、暗黑模式、缩放 200% 这些真实场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
