🎨 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 方式在所有浏览器中兼容。