在雜志排版中，常常能看到首字下沉的效果。

在Web的排版中，也常常能看到上圖這樣的效果。并且常常看到的是首段首字下沉。那么今天這篇文章咱們來聊聊如何使用CSS實現首字下沉效果。

::first-letter實現首字下沉效果

早期中，實現首字下沉都是能過偽元素::first-letter來實現。其實現原重非常的簡單，就是把首字font-size值設置較大，然后能過float來實現。比如：

p::first-letter {

color: #c69c6d;

float: left;

font-size: 5em;

margin: 0 .2em 0 0;

}

上面這段代碼將會把所有段落的首字下沉，如果僅需要對首段首字下沉，那還需要配合其它的選擇器來實現。

p:first-child::first-letter {

color: #c69c6d;

float: left;

font-size: 5em;

margin: 0 .2em 0 0;

}

Initial-Letter

前面看到的效果是老式的CSS實現的首字下沉效果。雖然是實現了，但借助float還是存在一定的缺陷，而且靈活度也并不強。不過值得慶幸的是，在CSS Inline Layout Module Level 3提供了一個新的思路和方案：采用initial-letter。

這個新屬性能非常輕易的幫且我們實現首字下沉的效果，但他只能運用于塊容器首行首字。同樣需要配合::first-letter一起使用。比如：

.intro::first-letter {

initial-letter: 7;

}

得到的效果如下圖所示：

initial-letter有一個非常靈活之處，它接受兩個值：

initial-letter: 3 3

第一個值表示的行高，第二個表示沉度。將前面的示例換換：

.raised-cap::first-letter {

initial-letter: 3 1;

}

.sunken-cap::first-letter {

initial-letter: 3 2;

}

.drop-cap::first-letter {

initial-letter: 3;

}

最終得到的效果如下：

再來看看瀏覽器目前對initial-letter屬性的支持力度。大家或許會很失望，但不用過于擔心，我想不需要過多久瀏覽器會很快就對該屬性支持。

雖然瀏覽器對該屬性支持度還是滿天紅色，但我們可以借助早前介紹的@supports來做一些降級處理：

// 瀏覽器不支持采用以前的方案

@supports (not(initial-letter: 5)) and (not(-webkit-initial-letter: 5)) {

.intro::first-letter {

color: hsl(350, 50%, 50%);

font-size: $cap-size;

float: left;

line-height: .7;

margin: 17px 2px 0 0;

}

}

// 支持的瀏覽器采用下面的方案

@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {

.intro:nth-of-type(1)::first-letter {

initial-letter: 3;

}

}

效果如下：

總結

文章簡單介紹了如何使用CSS實現首字下沉效果。特別是CSS Inline Layout Module Level 3新模塊中提供的initial-letter屬性。該屬性能更靈活的實現首字下沉效果。這篇文章只是簡單的介紹了initial-letter屬性，但該模塊還提供了其它的一些屬性，比如initial-letter-align和initial-letter-wrap。后面將花一個篇幅來介紹整個模塊中相關屬性的使用。

擴展閱讀

常用昵稱“大漠”，W3CPlus創始人，目前就職于手淘。對HTML5、CSS3和Sass等前端腳本語言有非常深入的認識和豐富的實踐經驗，尤其專注對CSS3的研究，是國內最早研究和使用CSS3技術的一批人。CSS3、Sass和Drupal中國布道者。2014年出版《圖解CSS3：核心技術與案例實戰》。

總結

以上是生活随笔為你收集整理的css入门教程 网页首字下沉,CSS制作首字下沉_CSS Inline Layout Module, initial-letter, CSS3 教程_w3cplus...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。