CSS中的line-height行高属性的使用技巧小结

CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定（如：line-height:1.4;）所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起，线条过高就会相距甚远，这两种情况都会降低可读性。不过你可能已经知道了这一点。

本文中，我们将把注意力放在一些设计上。如果你知道（或可以计算出）的line-height的精确值，你可以做一些奇妙的东西！

每行文本设置不同颜色

很遗憾这里没有::nth-line(),我们直接使用<span>是不可靠的,因为会有很多不同的事情导致文本在不同的地方被打乱。

尽管是非标准的，但这里还有一种用法就是使用一个元素的背景作为文字的背景。

1. .text {   
2.   -webkit-background-clip: text;   
3.   -webkit-text-fill-color: transparent;   
4. }  

而这里还有另一个绝招，你可以用linear-gradient()来让颜色排列在一起就不会褪变成另一个颜色。它只是会突然的结束然后开始另一个。比方说我们知道line-height是22px，我们可以制作一个像这样的阶梯色。

1. .text {   
2.   background-image: linear-gradient(   
3.     to bottombottom,   
4.     #9588DD,   
5.     #9588DD 22px,   
6.     #DD88C8 22px,   
7.     #DD88C8 44px,   
8.     #D3DD88 44px,   
9.     #D3DD88 66px,   
10.     #88B0DD 66px,   
11.     #88B0DD);   
12. }  

结合着两种技巧

在不支持文本背景剪裁的浏览器里，比如Firefox,你会得到一个文本后面的实心背景颜色块。也许这很酷你会喜欢它。但也可能你只是想要得到那样的文本颜色。在这种情况下，你可以使用@support去单独的支持它。

此外，当你需要在各处使用line-height，把他设置成变量或许会更好。我将在这里使用SCSS，或许有一天在CSS中也可以使用变量。所以改变之后，他依旧被渲染，看起来它一直保持工作。

1. $lh: 1.4em;   
2. body {   
3.   font-size: 1em;   
4.   line-height: $lh;   
5. }   
6. @supports (-webkit-background-clip: text) {   
7.   p {   
8.     -webkit-background-clip: text;   
9.     -webkit-text-fill-color: transparent;   
10.     background-image: linear-gradient(   
11.       to bottombottom,   
12.       #9588DD,   
13.       #9588DD $lh,   
14.       #DD88C8 $lh,   
15.       #DD88C8 $lh*2,   
16.       #D3DD88 $lh*2,   
17.       #D3DD88 $lh*3,   
18.       #88B0DD $lh*3,   
19.       #88B0DD);   
20.   }   
21. }  

在元素的顶部使用这种方式是最容易的。下面是一个例子，重点是前几行被改变。

1. .text {   
2.   -webkit-background-clip: text;   
3.   -webkit-text-fill-color: transparent;   
4.   background-image: linear-gradient(   
5.     to bottombottom,   
6.     rgba(