免费在线CSS首字母下沉(Drop Cap)生成器，设置首字母大小、字体、颜色、背景和内边距。支持initial-letter属性，实时预览段落效果，一键复制CSS代码。无需注册。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ 首字母样式设置
自定义首字母的下沉效果、字体、颜色等属性。
3
px
8px
10px
👁️ 实时预览
段落首字母将按照你的设置显示下沉效果。
💻 CSS代码
📖 CSS首字母下沉详解
首字母下沉（Drop Cap） 是一种经典的排版装饰技术，常用于书籍、杂志、博客文章的开篇段落，让首字母脱颖而出。
实现方式
- initial-letter 属性 — CSS新特性，可指定首字母占据的行数和缩放比例（如
initial-letter: 3） - ::first-letter 伪元素 — 跨浏览器兼容的传统方式，配合 float、font-size、line-height 等属性
设计技巧
- 深色背景 + 亮色文字的首字母能形成强烈视觉对比
- 使用不同的字体让首字母与正文区分
- 添加背景色和圆角打造精美的装饰效果
- 首字母颜色与品牌色一致可以强化品牌识别
浏览器兼容性
initial-letter 属性在 Safari 9+ 中支持，Chrome 110+ 需启用实验性标志。传统 ::first-letter 方式在所有浏览器中兼容。