CSS教程：首字母下沉

示意图：

要在CSS中实现首字母下沉效果，您可以使用伪元素::first-letter和一些样式属性来控制首字母的显示方式。以下是一个简单的示例，演示如何实现首字母下沉效果：

/* 设置文本样式 */
.text-with-sunken-first-letter::first-letter {
  font-size: 36px; /* 设置首字母的字体大小 */
  font-weight: bold; /* 设置首字母的字体粗细 */
  float: left; /* 将首字母浮动到左侧 */
  margin-right: 5px; /* 可选：为了使首字母与文本保持一定的间距 */
  margin-bottom: -10px; /* 将首字母下沉 */
}

在上面的示例中，我们使用::first-letter伪元素选择器来选择文本的首字母，并对其应用样式。通过设置首字母的字体大小、字体粗细以及使用浮动和负外边距来调整位置，我们实现了首字母下沉的效果。

然后，您可以将具有该类的样式应用到您的文本元素上，例如：

<p class="text-with-sunken-first-letter">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

使用上述CSS代码和HTML代码，您可以在文本的首字母上实现下沉效果。您可以根据需要调整样式属性的值来达到期望的效果。