用过word的大部分人都知道，word里有一个首字下沉功能，在文章的排版时用，有时能给文章增色不少。今天我们用css仿word的首字下沉功能，不用修改代码，只用到css的伪元素:first-letter，即可实现首字下沉效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>css首字下沉效果</title><style type="text/css">p:first-letter { font-size:36px; float:left; color:#f60; padding:5px; font-family:"黑体"} </style></head><body><p>这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合，如果是这样，用户****可能会把首字母同时应用到这个字母组合。<br/>在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任何元素关联。可以应用到首字母的属性是有限的。<br /></p></body></html>
推荐链接