::first-letter不支持transition，这是css规范明确禁止的；替代方案包括js包裹首字符后加transition、使用initial-letter（有限支持）或transform缩放容器，中文场景必须预处理html用span包裹首字以确保确定性。
为什么::first-letter加transition没反应
因为::first-letter伪元素**不支持transition**——这不是浏览器bug，而是CSS规范明确禁止的。所有主流引擎（Chrome、Firefox、Safari）都会静默忽略对它的过渡声明，连控制台都不会报错。你写transition: font-size 0.3s，它就当没看见。
::first-letter能动画的替代方案有哪些
真要实现“放大+平滑过渡”，得绕开伪元素本身，用可动画的真实DOM节点：
- 用JS提取首字符，包裹成
<span class="first-char">A</span>，再对这个span设transition: font-size 0.3s ease - 用
initial-letter（仅Chrome 122+ / Safari 16.4+ 支持），但它本身也不支持transition，仍需配合JS监听状态变化后切换class - 放弃首字下沉，改用
transform: scale()作用于整个段落容器，再用overflow: hidden裁剪——但会丢失文字选择和可访问性
如果坚持用::first-letter，哪些样式能“模拟”过渡感
虽然不能真正过渡，但可以靠视觉技巧弱化突兀感：
- 把
font-size设为2.8em而非3em，避免放大后行高剧烈跳变 - 加
text-shadow: 0 0 8px rgba(0,0,0,0.1)，让边缘轻微虚化，减少硬边带来的“弹出感” - 用
margin-right: 0.18em这种非整数值，比0.2em更柔和地拉开间距 - 避免
float: left+line-height: 1这种强控制组合，改用display: inline-block+vertical-align: top，对齐更宽容
中文首字放大过渡的现实路径
中文场景下，::first-letter本就不可靠——它可能选中开头的《、【或空格，甚至在Safari和Chrome里行为不一致。想稳定实现“首字放大+过渡”，唯一靠谱路径是：
- 服务端或构建时预处理HTML，把每个
<p></p>的首汉字用<span class="drop-cap"></span>包住 - CSS只对
.drop-cap写transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) - 不依赖任何伪元素，也不赌浏览器对Unicode首字符的解析逻辑
真正麻烦的从来不是怎么写过渡，而是怎么让“首字”这个概念在HTML里有确定的边界——::first-letter给不了这个确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
