必须用 background-clip: text 实现文字渐变色，配合 color: transparent 和渐变背景；需加 -webkit-background-clip: text 兼容 safari/旧 chrome；渐变须用 linear-gradient 或 radial-gradient，角度推荐 90deg 或 to right。
background-clip: text 实现文字渐变色
纯 CSS 文字渐变必须用 background-clip: text，不能只靠 color 或 text-fill-color —— 后者已废弃且无浏览器支持。核心是让背景“贴合文字形状”，再把文字本身设为透明。
常见错误：漏掉 -webkit-background-clip: text，导致 Safari 和旧版 Chrome 完全不显示渐变；或忘记 color: transparent，结果文字盖住背景。
-
background必须是渐变函数（linear-gradient或radial-gradient），普通颜色值无效 - 渐变角度推荐用
90deg（左→右）或to right，避免用left这类易混淆关键字 - 小字号（font-smooth: antialiased 或降级为单色
- Firefox 120+ 已原生支持
background-clip: text，但低版本仍需-webkit-前缀
.gradient-text {
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 32px;
font-weight: bold;
}
-webkit-text-stroke 实现单色描边
-webkit-text-stroke 是目前最轻量、渲染最稳的文字描边方案，但它是 WebKit 私有属性，Chrome/Edge 新版本虽支持，但 Firefox 全系不认。
常见错误：写成 text-stroke: 2px #000（标准属性未被任何浏览器实现），或漏掉 color: transparent 导致描边+填充双层叠加、边缘发虚。
- 语法是
-webkit-text-stroke: <width><color></color></width>，两个值缺一不可 - 描边宽度超过文字高度的 15% 时，内部空间会被严重挤压，尤其影响中文字形（如「口」「田」结构）
- 搭配
font-weight: bold可缓解描边过细导致的视觉断裂 - 若需兼容 Firefox，必须 fallback 到
text-shadow多层模拟（见下一节）
text-shadow 模拟描边的兼容写法
当目标环境包含 Firefox 或旧 Edge 时，text-shadow 是唯一可靠选择。它本质是用 4 个方向的硬边阴影拼出描边轮廓，不是“描边”而是“围边”。
常见错误：阴影模糊值（第三个参数）设为非零（如 1px），导致边缘毛糙；或偏移量不统一（如混用 -1px 0 和 0 -1px），造成描边粗细不均。
- 必须用
0作模糊半径，否则无法形成锐利描边 - 标准八向包围写法是：上、下、左、右 + 四个对角（共 8 层），但实际常用 4 层（上下左右）已够用
- 描边宽度 = 阴影偏移绝对值 × 2，例如
-1px -1px 0 #000和1px 1px 0 #000组合，等效 2px 描边 - 性能开销随层数线性增长，超过 12 层可能触发低端设备重绘卡顿
.stroke-fallback {
color: transparent;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
渐变色描边只能靠伪元素叠加
CSS 原生不支持 -webkit-text-stroke: 2px linear-gradient(...) —— 所有尝试直接给描边加渐变的写法都会静默失败。
真正可用的方案是用 ::before 伪元素覆盖一层带渐变背景的相同文字，并通过 transform: translate() 错位制造“描边感”。这本质是视觉欺骗，但效果可控、兼容性好。
- 必须用
content: attr(data-text)保证伪元素文字与主元素同步，不能写死文本 - 错位量建议设为描边目标宽度的 ±1.2 倍（如目标 3px 描边，偏移 ±3.6px），太小显不出，太大会露白边
- 伪元素需设
z-index: -1或pointer-events: none，避免遮挡点击区域 - 此方案在高缩放比（如 150%）下可能出现像素级错位，需配合
will-change: transform强制 GPU 加速
渐变和描边同时存在时，background-clip 和 -webkit-text-stroke 不能共存于同一元素——描边会盖住渐变边缘。必须拆成两层 DOM 或用伪元素分治，这是最容易被跳过的底层约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
