::before 是唯一能稳定实现复杂文本边框效果的伪元素，因其可前置渲染、配合 background-clip: text 和 transform: scale() 模拟描边，而 ::after 易遮挡错位，双伪元素叠用常因层叠上下文失效。
::before 是唯一能稳定实现复杂文本边框效果的伪元素，但必须配合 background-clip: text、transform: scale() 和显式 content，不能单靠它“画边框”。
为什么不是 ::after 或两个伪元素叠描边
文本边框（如双色描边、外扩渐变边、粗细不等的嵌套描边）本质是“文字轮廓扩张”，不是容器边框。浏览器不支持 border 作用于文字，::after 在文字场景中极易遮挡或错位；而 ::before 可前置渲染、控制层级，并通过 transform: scale(1.05) 模拟描边宽度——这是目前最可控的方案。
-
::before必须设content: attr(data-text)，否则无法复刻原始字形 - 不能用
100% × 100%宽高，得用inset: 0+position: absolute确保贴合 - 若同时用
::before和::after，::after往往被z-index或层叠上下文截断，实际只生效一层
::before 实现多重描边的关键参数组合
所谓“多重描边”，其实是同一段文字用不同缩放倍率和描边方式叠加两次以上。核心不是写多个 ::before（浏览器只认一个），而是靠 -webkit-text-stroke + transform + filter 分层控制。
-
-webkit-text-stroke: 2px #000提供第一层硬边，兼容性好但不支持虚线/渐变 -
transform: scale(1.08)的::before配合background: linear-gradient(...)+background-clip: text+color: transparent实现第二层视觉描边 - 第三层可用
filter: drop-shadow(0 0 1px #ff0)模拟发光边，注意它不响应border-radius，且在 Safari 中可能被裁剪
常见翻车点：圆角描边断裂、移动端发虚、缩放失真
这些不是 bug，是描边层与文字基线没对齐导致的渲染偏差。
立即学习“前端免费学习笔记（深入）”；
- 圆角描边失效？因为
border-radius对文字无效——得用clip-path: inset(0 round 4px)包裹整个::before元素 - iPhone 上描边发虚？DPR=3 时 1px 描边被渲染为 3 物理像素但未做适配，应改用
transform: scale(0.333)配合font-size: 300px回退到逻辑像素 - 缩放后描边错位？
transform: scale()基于中心点缩放，需加transform-origin: center并禁用will-change: transform防止 GPU 渲染偏移
真正难的是让描边在任意字号、任意字体、任意缩放比例下都保持像素级对齐——这没法靠一套 CSS 通吃，必须根据具体字体的 ascent/descent 做微调，而且 WebKit 和 Firefox 对 -webkit-text-stroke 的解析仍有差异。
