纯 CSS text-shadow 是实现长阴影的首选，需控制偏移步长与颜色衰减（如 rgba(0,0,0,0.08)），8–12 层、dx/dy 递增、blur=0、无衬线粗体为佳；SVG filter 更适合响应式缩放场景；伪元素 skewX() 方案轻量但 SEO 不友好且易失真；Web 字体加载失败会导致阴影错位，须用 font-display: swap 和 font loading API 兜底。
用 CSS text-shadow 叠加实现长阴影最直接
长阴影本质是多个方向一致、偏移递增的阴影叠加，text-shadow 支持逗号分隔多层值，是纯 CSS 实现的首选。关键不是“堆多少层”，而是控制好偏移步长和颜色衰减。
常见错误是直接复制网上 20+ 层的冗长写法，结果字体变糊、渲染卡顿，或在 Safari 上出现锯齿。实际项目中 8–12 层足够，且建议用深灰到透明黑渐变（如 rgba(0,0,0,0.08)）替代纯黑，视觉更自然。
- 每层
text-shadow格式统一为：dx dy blur color，其中dx和dy按固定比例递增（如都 +1px 或 +0.5px） - 避免设
blur值（保持为0），否则边缘发虚，失去“锐利长影”特征 - 字体必须是无衬线、粗体（如
font-weight: 900），细体或衬线体拉长后极易断笔
SVG <filter> 方案适合需要缩放/响应式的场景
当文字要随容器等比缩放（比如 banner 标题），纯 CSS text-shadow 的像素偏移会失真。SVG <filter> 中的 <feOffset> 支持百分比单位和 in/result 链式处理，更可控。
但注意：SVG filter 默认作用于整个元素盒，若直接套在 <h1> 上，阴影会覆盖背景；正确做法是把文字转成 <text> 放进 <svg>，再用 <use> 引用滤镜。
立即学习“前端免费学习笔记（深入）”；
- 核心滤镜结构：
<feOffset dx="1" dy="1" result="off1"/>→<feOffset dx="2" dy="2" in="off1" result="off2"/>，逐层累加 - 最终用
<feMerge>合并所有偏移层，避免多次绘制开销 - 兼容性没问题（Chrome/Firefox/Safari/Edge 全支持），但不要在 IE 中尝试 —— IE 的 SVG filter 实现有严重偏移 bug
伪元素 + transform: skewX() 是 hack 但最轻量
如果只要视觉近似、不追求精确像素对齐（比如按钮文字、卡片角标），用 ::before 伪元素复制文字内容，然后 transform: skewX(-20deg) + translateX() 拉出斜向长影，再叠一层模糊，代码不到 10 行。
缺点很明显：文字内容重复，SEO 不友好；换行或字体变化时需同步改伪元素样式；而且 skewX 会让阴影宽度失真（越往右越宽）。仅推荐用于静态、小面积、非关键文本。
- 务必给伪元素设
content: attr(data-text)，配合 HTML 的data-text="XXX"属性，避免硬编码 -
z-index: -1确保伪元素在文字下方，且不能用opacity控制透明度 —— 要用color: rgba(0,0,0,0.1)，否则 skew 后边缘会漏白 - 慎用
filter: blur(0.5px)，部分安卓 WebView 会触发渲染异常导致文字闪烁
Web 字体加载失败时长阴影会彻底消失
所有方案都依赖字体真实渲染后的字形轮廓。如果自定义 Web 字体（如 @font-face 引入的 Montserrat）加载失败，回退到系统字体，而系统字体的字宽、字高、基线位置与设计稿不同，原来调好的阴影偏移立刻错位，甚至整段阴影“漂”到文字外侧。
这不是 CSS 问题，是字体度量差异导致的必然结果。线上必须加兜底：用 @font-face 的 font-display: swap 保证文字及时可见，同时在 JS 中监听 document.fonts.load()，加载成功后再给文字容器加 class="shadow-ready" 触发阴影渲染。
- 别信 “字体加载完自动重绘” —— 浏览器不会主动重算
text-shadow偏移 - 用
getComputedStyle(el).fontFamily检查当前生效字体，调试时比猜快得多 - 移动端尤其注意：iOS Safari 对字体加载完成事件触发较慢，建议加 100ms 微延迟再应用阴影类
