先來回顧一下line-height的基礎知識：

語法： line-height : normal | <實數> | <長度> | <百分比> | inherit
說明： 設置元素中行的高度。
值： normal：默認行高，一般為1到1.2； 實數：實數值，縮放因子； 長度：合法的長度值，可為負數； 百分比：百分比取值基于元素的字體尺寸。
初始值： normal
繼承性： 繼承
適用于： 所有元素
媒體： 視覺
計算值： 長度和百分比值為絕對值；其他同指定值。

CSS中的line-height屬性控制著兩行文本之間的空白多少，通常是會設置成一個無單位數值（比如line-height:1.4），表明其與font-size屬性所構成的比例。line-height在排版上是非常重要的一個屬性，太低的話，文字的行與行之間會尷尬地擠在一起，太高的話它們又會尷尬地分的太開，無論哪一種都對閱讀不利。不過你也許早就知道這一點了。

這篇文章中我們會著重介紹一些技巧，如果你知道（或者能搞清楚）line-height的確切值，你可以做得更有趣 。

為每一行文本指定不同顏色

不幸的是，我們并沒有::nth-line這個選擇器。我們也不能指望<span>會靠得住，數不清的原因可能導致文本在某處被斷開。

有一個辦法，雖然不標準，就是利用元素的背景來充當文字的背景。

CSS

也有另一個技巧，你可以用linear-gradient()加上色彩點來控制顏色之間不會互相漸變，讓一個顏色結束之后突然開始另一個顏色。我們假設line-height的值為22px，那我們就可以讓漸變每逢22px斷開一次。

Sass

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表