text-stroke不是HTML属性，而是实验性CSS属性，仅通过-webkit-text-stroke前缀在WebKit浏览器中支持；需配合color: transparent才能显示描边，Firefox不支持，跨浏览器可用text-shadow模拟或SVG替代。
text-stroke 不是 HTML 属性，而是 CSS 的 -webkit-text-stroke
直接写 textstroke 或在 HTML 标签里加 text-stroke="2px red" 完全无效——它根本不是 HTML 属性，也不是标准 CSS 属性（目前仍属实验性，仅通过 -webkit- 前缀支持）。所有尝试在 <p> 或 <span> 的 style 里写 text-stroke 而不带前缀，都会被浏览器忽略。
正确写法：用 -webkit-text-stroke + color 配合 transparent 文字色
要让描边真正“显现”，必须同时满足两个条件：开启描边、隐藏原文字填充。否则描边会被实心文字盖住。
-
-webkit-text-stroke控制描边宽度和颜色，例如-webkit-text-stroke: 2px #007bff - 文字本身需设为透明：
color: transparent（不能用opacity: 0，否则整个元素不可见） - 若想保留部分填充（比如半透底色），可用
color: rgba(0, 123, 255, 0.2)，但描边会叠加其上，效果需实测
h1 {
-webkit-text-stroke: 2px #e74c3c;
color: transparent;
font-size: 3rem;
}
Firefox 和 Safari（非 WebKit 内核版本）不支持 -webkit-text-stroke
Firefox 完全无视 -webkit-text-stroke；Safari 自 12.1 起支持，但旧版 iOS Safari 可能失效。没有跨浏览器的纯 CSS 替代方案。替代思路包括：
- 用
text-shadow模拟描边（最多 4 个方向，边缘锯齿明显） - 用 SVG
<text>+stroke和fill="none"，兼容性更好但需改结构 - 用 Canvas 绘制文字（适合动态或复杂样式，但失去语义和可访问性）
text-shadow 模拟描边时容易漏掉这 8 个方向
只写 text-shadow: 1px 1px 0 #000 只能覆盖右下角，实际描边需包围文字。完整模拟 1px 描边至少要 8 个阴影：
立即学习“前端免费学习笔记（深入）”；
p.outline {
color: #fff;
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
-1px 0 0 #000,
1px 0 0 #000,
-1px 1px 0 #000,
0 1px 0 #000,
1px 1px 0 #000;
}
注意：这种写法性能略低，且在高缩放或视网膜屏下可能模糊；-webkit-text-stroke 是唯一真正抗锯齿的描边方案，只是兼容性受限。
-webkit-text-stroke-width 不支持 em 或 rem 单位，只能用 px、pt 等绝对单位。 
