css怎么制作首字下沉

首字下沉的实现方法

首字下沉（Drop Cap）是一种常见的排版效果，通常用于文章开头第一个字母或字符放大并下沉多行。以下是几种实现方法：

方法一：使用::first-letter伪元素

p::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 0.2em;
  margin-bottom: 0.1em;
}

方法二：结合initial-letter属性（较新特性）

p::first-letter {
  initial-letter: 3;
  color: #900;
  font-weight: bold;
  margin-right: 0.5em;
}

方法三：使用span标签包裹首字 HTML结构：

<p><span class="dropcap">L</span>orem ipsum dolor sit amet...</p>

CSS样式：

.dropcap {
  font-size: 4em;
  float: left;
  line-height: 0.8;
  padding-right: 5px;
  color: #333;
}

注意事项

• 调整font-size和line-height可获得最佳视觉效果
• 使用float属性确保文字环绕效果
• 现代浏览器支持initial-letter属性（需检查兼容性）
• 添加适当的外边距防止与后续文字重叠

跨浏览器兼容方案

.dropcap {
  float: left;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}