用CSS实现首字下沉效果，仿word的首字下沉
用過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>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>CSS首字下沉</title>
<style type="text/css">
.dyfirst {
width:300px;
border:1px solid #ddd;
padding:5px;
font-size:12px;
margin:5px 0;
}
.dyfirst:first-line {
color:#050;
}
.dyfirst:first-letter {
font-size:300%;
font-weight:bold;
color:#000;
float:left;
}
</style>
</head>
<body>
<div class="dyfirst"> To the world you may be one person, but to one person you may be theworld. Never frown, even when you are sad, because you never know who is fallingin love with your smile. </div>
<div class="dyfirst"> 對于世界而言，你是一個人；但是對于某個人，你是他的整個世界。縱然傷心，也不要愁眉不展，因為你不知是誰會愛上你的笑容。 </div>
</body>
</html>
本文轉自寒意博客園博客，原文鏈接：http://www.cnblogs.com/hnyei/archive/2012/03/02/2376692.html，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的用CSS实现首字下沉效果，仿word的首字下沉的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 系统中图片上传设计方案
- 下一篇： 05-移动端开发教程-CSS3兼容处理