text-stroke需同时写-webkit-text-stroke和text-stroke以兼容各浏览器；仅支持px/pt等绝对单位；透明描边需配合color: transparent实现镂空效果；其渲染本质区别于drop-shadow，且不触发重排但可能与字体平滑冲突。
text-stroke 在 Chrome/Firefox 中能直接用，但 Safari 需要 -webkit- 前缀
原生 text-stroke 不是所有浏览器都开箱即用。Chrome 和 Firefox 支持标准写法，Safari 15.4+ 虽已支持无前缀版本，但旧版（尤其是 iOS Safari）仍依赖 -webkit-text-stroke。不加前缀时，部分 iOS 用户会看到纯色文字、描边完全失效。
- 必须同时写两行：
-webkit-text-stroke: 2px #ff6b6b;和text-stroke: 2px #ff6b6b; - 不能只靠
-webkit-前缀“兼容”——现代 Chrome 也认标准属性，漏掉它反而在某些 Chromium 新版本中失效 -
text-stroke不支持em、rem等相对单位，只能用px、pt或无单位数值（如2表示 2px）
描边颜色透明时，文字内容会“消失”，不是 bug 是渲染逻辑
当设 -webkit-text-stroke: 2px transparent，文字本体（color）若没显式设置，浏览器会按默认文本色渲染——但描边盖在文字边缘，透明描边 + 默认色文字 = 视觉上只剩一个模糊色块或干脆看不见。这不是样式没生效，而是描边层把文字“抠”出了空洞。
- 必须配
color: transparent才能得到纯描边效果（即只有边框，内部全透） - 如果只想让描边变浅，别用
transparent，改用带 alpha 的色值，比如rgba(0,0,0,0.3) - 在深色背景上用
color: transparent+-webkit-text-stroke: 1px white是最稳的“镂空字”方案
滤镜描边（drop-shadow）和 text-stroke 渲染本质不同，别混着调
text-stroke 是文字轮廓描边，紧贴字形路径；filter: drop-shadow() 是对整个文字盒做投影，会发虚、偏移、受 border-radius 影响，且无法控制内/外描边方向。
-
drop-shadow(0 0 2px #000)看似像描边，实际是模糊半径为 2px 的阴影，缩放或高清屏下边缘毛糙 - 多层
drop-shadow叠加（如模拟双色描边）会导致性能下降，尤其在滚动容器里 - 真正需要“外描边+内发光”或“渐变描边”时，
text-stroke无能为力，得切 SVG 或用background-clip: text+text-fill-color: transparent配合渐变背景
text-stroke 不触发重排，但和 font-smoothing 冲突时会糊字
text-stroke 本身是纯绘制层操作，不影响布局流，这点比伪元素描边轻量。但它和 -webkit-font-smoothing 或 font-smooth 共存时，某些字体（尤其是细体、无衬线体）会出现描边锯齿或文字发虚。
立即学习“前端免费学习笔记（深入）”；
- Mac Safari 下建议加
-webkit-font-smoothing: antialiased;，避免描边边缘生硬 - Windows Chrome 若开启 ClearType，
text-stroke容易和子像素渲染打架，描边看起来断续——此时换用paint-order: stroke fill（需配合 SVG 文字）更可靠 - 描边宽度超过 3px 后，小字号文字（≤14px）识别度骤降，不是代码问题，是可读性阈值到了
实际项目里，最常被忽略的是描边与文字层级关系：它永远画在文字填充之上，但不会遮挡相邻元素的 z-index。如果描边要“压住”后面的内容，得靠父容器 position: relative + z-index 控制，而不是指望描边自己抢层。
