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

网友 来源: 网友投稿 2016-1-15 20:29 我要评论()

CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过 ...

CSS中的line-hight属性是用来控制文本行之间的空隙的。它一般情况下没有单位的设定(如:line-height:1.4;)所以这是一个按字体尺寸的比例来计算。这对印刷版来说是一个很重要的属性。线条过低就会挤在一起,线条过高就会相距甚远,这两种情况都会降低可读性。不过你可能已经知道了这一点。
本文中,我们将把注意力放在一些设计上。如果你知道(或可以计算出)的line-height的精确值,你可以做一些奇妙的东西!
每行文本设置不同颜色
很遗憾这里没有::nth-line(),我们直接使用<span>是不可靠的,因为会有很多不同的事情导致文本在不同的地方被打乱。
尽管是非标准的,但这里还有一种用法就是使用一个元素的背景作为文字的背景。
C/C++ Code复制内容到剪贴板
.text {   
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;   
}  
而这里还有另一个绝招,你可以用linear-gradient()来让颜色排列在一起就不会褪变成另一个颜色。它只是会突然的结束然后开始另一个。比方说我们知道line-height是22px,我们可以制作一个像这样的阶梯色。
CSS Code复制内容到剪贴板
.text {   
  background-image: linear-gradient(   
    to bottombottom,   
    #9588DD,   
    #9588DD 22px,   
    #DD88C8 22px,   
    #DD88C8 44px,   
    #D3DD88 44px,   
    #D3DD88 66px,   
    #88B0DD 66px,   
    #88B0DD);   
}  
201622114240684.png (1182×202)
结合着两种技巧
201622114304277.png (1196×234)
在不支持文本背景剪裁的浏览器里,比如Firefox,你会得到一个文本后面的实心背景颜色块。也许这很酷你会喜欢它。但也可能你只是想要得到那样的文本颜色。在这种情况下,你可以使用@support去单独的支持它。
此外,当你需要在各处使用line-height,把他设置成变量或许会更好。我将在这里使用SCSS,或许有一天在CSS中也可以使用变量。所以改变之后,他依旧被渲染,看起来它一直保持工作。
CSS Code复制内容到剪贴板
$lh: 1.4em;   
body {   
  font-size: 1em;   
  line-height: $lh;   
}   
@supports (-webkit-background-clip: text) {   
  p {   
    -webkit-background-clip: text;   
    -webkit-text-fill-color: transparent;   
    background-image: linear-gradient(   
      to bottombottom,   
      #9588DD,   
      #9588DD $lh,   
      #DD88C8 $lh,   
      #DD88C8 $lh*2,   
      #D3DD88 $lh*2,   
      #D3DD88 $lh*3,   
      #88B0DD $lh*3,   
      #88B0DD);   
  }   
}  
在元素的顶部使用这种方式是最容易的。下面是一个例子,重点是前几行被改变。
CSS Code复制内容到剪贴板
.text {   
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;   
  background-image: linear-gradient(   
    to bottombottom,   
    rgba(white, 0.8),   
    rgba(white, 0.8) $lh,   
    rgba(white, 0.6) $lh,   
    rgba(white, 0.6) $lh*2,   
    rgba(white, 0.4) $lh*2,   
    rgba(white, 0.4) $lh*3,   
    rgba(white, 0.2) $lh*3,   
    rgba(white, 0.2));   
}  
201622114322267.png (1326×460)
 网页制作教程
网页制作教程
制作网页
制作网页
ps教程
ps教程
网页制作模板
网页制作模板
excel教程
excel教程
如果我们试图在任意数量的文本上对最后几行进行定位,这将变得更加困难。在这种情况下,我们需要让第一个颜色带从顶部开始向下渐变。幸运的是我们可以用calc()做到这一点。
CSS Code复制内容到剪贴板
.text {   
  -webkit-background-clip: text;   
  -webkit-text-fill-color: transparent;   
  background-image: linear-gradient(   
    to bottombottom,   
    rgba(white, 0.8),   
    rgba(white, 0.8) calc(100% - 66px),   
    rgba(white, 0.6) calc(100% - 66px),   
    rgba(white, 0.6) calc(100% - 44px),   
    rgba(white, 0.4) calc(100% - 44px),   
    rgba(white, 0.4) calc(100% - 22px),   
    rgba(white, 0.2) calc(100% - 22px),   
    rgba(white, 0.2));   
  background-position: bottombottom center;   
}  

1.本站内容来源于网络,不保证真实、完整,不代表本站观点,由此造成的任何后果本站不承担相关法律责任。2.本站的原创文章,请转载时务必注明来源;3.作者投稿可能有修改或补充,如有侵权请联系删除,本站免责。

无限全国流量卡15/张
精彩导读
叶根友字体打包下载