首頁 >web前端 >css教學 >css的initial-letter屬性實現首字下沉效果（程式碼實例）

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

青灯夜游原創: 2018-10-12 15:07:574681瀏覽

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

效果圖：

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

#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;
}

效果圖：

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

##是不是很方便簡單，但很遺憾現在還有很多的瀏覽器不支援該屬性，下面我們來看看哪些瀏覽器支援（綠色表支援）：

css的initial-letter屬性實現首字下沉效果（程式碼實例） ##雖然現在瀏覽器對此屬性的支持度還是滿天紅色，但我們可以藉助@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;
  }
}

效果圖：

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