::first-letter不支持text-transform，因其被css规范明确禁止；有效样式仅限font-size、color、float等有限属性，实现首字下沉必须配合float:left与line-height:1等组合。
为什么 ::first-letter 设置 text-transform: uppercase 没用
因为 CSS 规范明确禁止在 ::first-letter 上使用 text-transform。即使写了，浏览器会直接忽略——这不是兼容性问题，而是标准行为。想让首字母“看起来大写”，得靠其他方式：比如它本来就是大写字母（A 而非 a），或用 font-size + float 做视觉放大。
::first-letter 支持哪些样式？哪些绝对不能用
能用的包括：font-size、font-weight、font-family、color、background、margin-left/right、padding-left/right、border、line-height（仅当父元素是块级且设置了 line-height 时才影响布局）。
以下属性写上去无效，别白费力气：
-
width/height transform-
display（设成block或inline-block都不生效） -
text-transform（再次强调，无效）
怎么做出真正可用的“首字下沉”效果
纯靠 font-size: 3em 会让后续文字上移、行高错乱，必须配合 float: left 才稳定。典型写法如下：
p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
line-height: 1;
margin-right: 0.2em;
}
关键点：
-
float: left是必须的，否则首字母会撑开整行高度 -
line-height: 1防止浮动后文字垂直对齐异常 -
margin-right控制首字母和后续文字间距，避免贴太紧 - 如果段落用了
text-align: justify，浮动首字母可能导致最后一行对齐异常，需额外测试
移动端适配要注意什么
在小屏幕设备上，过大的 font-size 容易溢出容器或挤压正文。建议：
- 用
rem或em而非固定像素值，便于响应式缩放 - 搭配媒体查询降级：比如
@media (max-width: 480px)中把font-size改成2em - 注意 iOS Safari 对
::first-letter的支持较稳，但部分 Android WebView（尤其旧版）可能完全忽略该伪元素——如有强需求，得准备内联<span class="dropcap">A</span>的 fallback 方案
首字下沉不是加个样式就完事，它本质是破坏文档流的布局操作，任何改动都要观察后续文字是否错位、换行是否异常、小屏是否溢出——这些细节比“怎么写”更决定最终效果成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
