css如何實現首字下沉效果？這篇文章就跟大家介紹css是如何達成首字下沉效果的，讓大家了解用initial-letter屬性是怎麼達成首字下沉效果的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
首先我們來了解一下initial-letter屬性要怎樣實現首字下沉效果吧！
initial-letter屬性：是CSS Inline Layout Module Level 3新模組中提供的，雖然可以非常輕易的幫我們實現首字下沉的效果，但它只能運用於塊容器首行首字上。還需要配合css的偽元素::first-letter一起使用。範例：
.intro::first-letter {
color: #bf4055;
initial-letter: 3;
}效果圖：
#initial-letter屬性裡可以設定兩個值：
initial-letter：值1 值2;
值1 ：表示的行高；
值2：表示沉度。
這裡我們就用簡單的程式碼範例來看效果：
.raised-cap::first-letter {
color: #bf4055;
initial-letter: 3 1;
}
.sunken-cap::first-letter {
color: #bf4055;
initial-letter: 3 2;
}
.drop-cap::first-letter {
color: #bf4055;
initial-letter: 3;
}效果圖：
##雖然現在瀏覽器對此屬性的支持度還是滿天紅色，但我們可以藉助@supports來做一些降級處理，判斷瀏覽器是否支持，從而實現首字下沉效果：
// 浏览器支持 采用下面的方法
@supports (initial-letter: 5) or (-webkit-initial-letter: 5) {
.intro:nth-of-type(1)::first-letter {
-webkit-initial-letter: 3;
initial-letter: 3;
}
}
// 浏览器不支持 采用 伪元素+浮动的方法
@supports (not (initial-letter: 5)) and (not (-webkit-initial-letter: 5)) {
.intro::first-letter {
color: #bf4055;
font-size: 7.1875rem;
float: left;
line-height: .7;
margin: 17px 2px 0 0;
}
}效果圖：
的核心就在於這句話：@supports (...) { } ，括號內有一個CSS 表達式，如果瀏覽器判斷括號內的表達式合法，那麼接下來就會去渲染括號內的CSS 表達式。 上述關於
css實作首字下沉的偽元素 浮動的方法可閱讀之前的文章【css如何實現首字下沉效果？偽元素 浮動實現效果】，裡面有詳細的介紹。 總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問
CSS基礎影片教學， CSS3影片教學！ 相關推薦：
CSS線上手冊#CSS3線上手冊網頁設計影片教學css3特效程式碼大全以上是css的initial-letter屬性實現首字下沉效果（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
