html无原生“长投影”，需用text-shadow多层叠加（如2px 2px 0 #999,4px 4px 0 #999）或::after伪元素+transform模拟；前者锐利但僵化，后者灵活却需同步data-text且不兼容换行与打印。
HTML 本身不支持“长投影”——所谓“文字长投影”本质是 text-shadow 的多层叠加或配合伪元素模拟，没有原生的“拉长阴影”属性，别被标题误导。
text-shadow 多层叠加实现斜向长投影
浏览器只认标准 text-shadow 语法：text-shadow: x-offset y-offset blur-radius color。要“拉长”，就靠重复写多个阴影，逐级偏移：
h1 {
text-shadow:
2px 2px 0 #999,
4px 4px 0 #999,
6px 6px 0 #999,
8px 8px 0 #999,
10px 10px 0 #999;
}
要点：
- 所有
blur-radius设为0才锐利，有模糊会糊成一团 - 偏移量（
x-offset/y-offset）必须严格递增，否则断层或倒退 - 超过 5–7 层后渲染开销明显上升，低端设备可能卡顿
- 不能响应文字缩放（如用户设置 200% 字体），投影长度不会同比例拉长
用 ::after 伪元素 + transform 模拟动态长投影
真正可控的“长投影”得脱离 text-shadow，改用绝对定位的伪元素复制文字内容，再用 transform: translate() 拉伸位移：
.shadow-text {
position: relative;
color: #000;
}
.shadow-text::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
color: #aaa;
z-index: -1;
transform: translate(12px, 12px);
pointer-events: none;
}
使用时：
<h2 class="shadow-text" data-text="Hello">Hello</h2>
优势与限制：
- 投影长度可随
transform值任意调节，且支持scale()做压扁效果（模拟斜射光） - 需手动同步
data-text，JS 动态更新文本时容易漏掉伪元素内容 - 如果文字含换行、
<span></span>内联样式，伪元素无法继承，得用 JS 渲染完整 HTML 片段 - 打印时默认不显示
::after，需额外加@media print规则
注意字体渲染差异导致的投影错位
不同系统对相同字体的 hinting 和 subpixel 渲染策略不同，text-shadow 或伪元素在 macOS / Windows / Android 上可能出现 0.5px 级别的偏移错位：
- 避免用小数像素值（如
1.5px），统一用整数 - 禁用抗锯齿（
-webkit-font-smoothing: none）会加剧边缘毛刺，不推荐 - 若必须精确对齐，建议用 SVG
<text></text>+<filter></filter>，但失去语义化和 SEO 友好性
最麻烦的其实是响应式场景：视口缩放、用户强制放大字体、甚至暗色模式下颜色对比度变化，都会让预设的投影参数失效。真要兼顾，得用 JS 监听 resize 和 font-size 变化，动态重算偏移量——但多数项目不值得为投影这么干。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
