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

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

::first-letter實(shí)現(xiàn)首字下沉效果

早期中，實(shí)現(xiàn)首字下沉都是能過(guò)偽元素::first-letter來(lái)實(shí)現(xiàn)。其實(shí)現(xiàn)原重非常的簡(jiǎn)單，就是把首字font-size值設(shè)置較大，然后能過(guò)float來(lái)實(shí)現(xiàn)。比如：

p::first-letter {

color: #c69c6d;

float: left;

font-size: 5em;

margin: 0 .2em 0 0;

}

上面這段代碼將會(huì)把所有段落的首字下沉，如果僅需要對(duì)首段首字下沉，那還需要配合其它的選擇器來(lái)實(shí)現(xiàn)。

p:first-child::first-letter {

color: #c69c6d;

float: left;

font-size: 5em;

margin: 0 .2em 0 0;

}

Initial-Letter

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

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

.intro::first-letter {

initial-letter: 7;

}

得到的效果如下圖所示：

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

initial-letter: 3 3

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

.raised-cap::first-letter {

initial-letter: 3 1;

}

.sunken-cap::first-letter {

initial-letter: 3 2;

}

.drop-cap::first-letter {

initial-letter: 3;

}

最終得到的效果如下：

再來(lái)看看瀏覽器目前對(duì)initial-letter屬性的支持力度。大家或許會(huì)很失望，但不用過(guò)于擔(dān)心，我想不需要過(guò)多久瀏覽器會(huì)很快就對(duì)該屬性支持。

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

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

@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;

}

}

效果如下：

總結(jié)

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

擴(kuò)展閱讀

常用昵稱“大漠”，W3CPlus創(chuàng)始人，目前就職于手淘。對(duì)HTML5、CSS3和Sass等前端腳本語(yǔ)言有非常深入的認(rèn)識(shí)和豐富的實(shí)踐經(jīng)驗(yàn)，尤其專注對(duì)CSS3的研究，是國(guó)內(nèi)最早研究和使用CSS3技術(shù)的一批人。CSS3、Sass和Drupal中國(guó)布道者。2014年出版《圖解CSS3：核心技術(shù)與案例實(shí)戰(zhàn)》。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。