css的initial-letter屬性實現首字下沉效果（程式碼實例）

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 語法

的核心就在於這句話：@supports (...) { } ，括號內有一個CSS 表達式，如果瀏覽器判斷括號內的表達式合法，那麼接下來就會去渲染括號內的CSS 表達式。 上述關於

css實作首字下沉的偽元素 浮動的方法

可閱讀之前的文章【css如何實現首字下沉效果？偽元素 浮動實現效果】，裡面有詳細的介紹。 總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問

CSS基礎影片教學

， CSS3影片教學！ 相關推薦：

CSS線上手冊

#CSS3線上手冊

網頁設計影片教學

css3特效程式碼大全

以上是css的initial-letter屬性實現首字下沉效果（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！