CSS 文本阴影完整教程：从凸起到霓虹的 6 种效果实战

基础语法： `` text-shadow: offset-x offset-y blur-radius color; ``

四个参数： - offset-x：x 轴偏移，正值向右，负值向左，单位 px - offset-y：y 轴偏移，正值向下，负值向上，单位 px - blur-radius：模糊半径，0 硬边阴影，越大越模糊，单位 px - color：阴影颜色，支持 #hex、rgb()、rgba()、hsl() 等

多层阴影：用逗号分隔，从左到右按顺序叠加（后面的在下层）： `` text-shadow: 2px 2px 4px rgba(0,0,0,0.3), -1px -1px 2px rgba(255,255,255,0.5); ``

重要：text-shadow 不会扩展文字的包裹盒，阴影部分超出盒子边界会被隐藏（除非设 overflow: visible）。设计阴影时要考虑文字周围空间。

凸起：底部阴影深、顶部亮光浅，营造光照来自上方的立体感。 `` text-shadow: 0 2px 0 #ccc, 0 4px 0 #999, 0 6px 0 #666, 0 8px 10px rgba(0,0,0,0.5); ``

关键点：多层递进（1-2 px 微小偏移堆叠），颜色递深（浅灰到深灰），最后一层加 blur（10px 柔和阴影）。24px 字号 → 阴影层数 4-6 层，最大偏移 = 字号 1/3。

凹陷：亮光在底部、暗影在顶部，造成文字被压入背景的感觉。 `` text-shadow: 2px 2px 0 rgba(255,255,255,0.5), -2px -2px 0 rgba(0,0,0,0.8); background: #ccc; ``

配合浅色背景（#ddd 或更浅）和简单配色，凹陷效果最明显。暗色背景或复杂配色会破坏效果。

3D 效果：模拟透视投影，阴影沿一个方向递进，模拟文字远离观察者的 3D 倾斜。 `` text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #bbb, 3px 3px 0 #999, 4px 4px 0 #777, 5px 5px 0 #555, 6px 6px 20px rgba(0,0,0,0.5); ``

配合 CSS transform 增强 3D 效果（需 perspective）：transform: perspective(500px) rotateX(5deg) rotateY(-10deg);

霓虹灯：彩色阴影高度模糊，多层不同颜色叠加，模拟霓虹管发光。 `` color: #fff; text-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff, 0 0 30px #ff00ff, 0 0 40px #00ffff; background: #000; ``

配置暗色背景看效果最佳。色彩组合：紫+青（#ff00ff + #00ffff），红+蓝，绿+蓝。性能警告：高 blur（30px+）和多层（6 层+）导致掉帧，移动设备要简化到 2-3 层，blur ≤ 15px。

复古双色：模拟老印刷或胶卷扫描的色差（chromatic aberration）。 `` text-shadow: -2px 0 0 #ff0000, / 红色左偏 / 2px 0 0 #0000ff; / 蓝色右偏 / ``

VHS、老电视画面的标志性视觉。可扩展为三色： `` text-shadow: -3px 0 0 #ff0000, 0 0 0 #00ff00, 3px 0 0 #0000ff; ``

柔光效果：多层白/浅色阴影微小偏移，营造被光晕包围的温暖感。 `` text-shadow: 0 0 5px rgba(255,255,255,0.8), 0 0 10px rgba(255,255,200,0.6), 0 0 15px rgba(255,200,0,0.4); color: #333; ``

适合温暖文案、节日主题、女性向设计。简化版仅用 2 层阴影，降低性能成本。

text-shadow：完全模糊阴影，不影响文字形状，可叠加。

-webkit-text-stroke（描边）：给文字加 outline，改变文字形状，单一定义（无法叠加）。 `` text-shadow: 2px 2px 4px rgba(0,0,0,0.5); -webkit-text-stroke: 1px #333; ``

选择建议：需要软边界、发光、深度感 → text-shadow；需要硬边界、轮廓、防止文字糊掉 → -webkit-text-stroke；同时需要 → 两者叠加（性能成本翻倍）。兼容性：text-shadow 所有现代浏览器支持，-webkit-text-stroke 在 Safari、Chrome、移动端普遍支持，Firefox 从 49+ 支持。

性能原理：每个 text-shadow 层都需一次 GPU 重绘。5+ 层触发 paint，导致掉帧。优化策略：桌面版 6 层以下，移动版 3 层以下，低端机 1-2 层。blur ≤ 15px 成本最低。超过 20px 考虑用背景图替代。用 will-change: text-shadow 提示浏览器优化。

基础 hover： `` a { text-shadow: 0 0 5px rgba(0,0,0,0.1); transition: text-shadow 0.3s ease; } a:hover { text-shadow: 0 0 15px rgba(0,100,200,0.8); } ``

@keyframes 动画： `` @keyframes glow { 0%, 100% { text-shadow: 0 0 10px rgba(255,0,0,0.5); } 50% { text-shadow: 0 0 20px rgba(255,0,0,1); } } .neon-text { animation: glow 1.5s ease-in-out infinite; } ``

注意：频繁改动 text-shadow 触发重绘。建议只在 :hover、:focus 时改变，动画时用 will-change: text-shadow 提示优化。对大量文本（> 50 元素同时动画）考虑用 Canvas 替代。频繁改色彩而保持 shadow 结构时，动画 color 或 opacity 配合固定 text-shadow 成本更低。

移动端问题：低 DPI 屏幕（200-300 ppi）会模糊高 blur 值的阴影，性能受限（GPU 弱），电池消耗快。

简化方案： ``` / 桌面版：完整效果 / .text { text-shadow: 0 0 20px #f0f, 0 0 40px #0ff; }

/ 移动版：1 层 / @media (max-width: 768px) { .text { text-shadow: 0 0 15px rgba(255,0,255,0.6); } }

/ 低端：禁用 / @media (max-width: 480px) and (hover: none) { .text { text-shadow: none; } } ```

色彩对比：前景与背景对比度建议 ≥ 4.5（WCAG AA）。深色前景 + 浅色背景效果最佳。避免低对比同色系组合（浅灰 + 白）。用 opacity 或 background 半透明底板也能降低性能成本。