• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

如何美化下划线

CSS3 web前端中文站 3年前 (2017-05-04) 1008次浏览 已收录 0个评论
文章目录[隐藏]

text-decoration

2014 年@Marcin Wichary 在 Medium 分享了如何更好的突出链接的下划线效果,@Mary Lou 更疯狂的制作出了一个 Demo,这个 Demo 展示了多种突出链接的效果,有些是使用的背景色,有些是使用不同的下划线方式。那么,接下来我们一起看看在 Web 中,如何更好的美化下划线的效果。

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

在 CSS 中,众所周之使用text-decoration:underline;可以为任何文本添加下划线的效果。那仅使用这个来添加下划线会有什么问题呢?我们先不回答这个问题,咱们先来讨论一下理想的场景中,强调使用下划线,它应该做到以下几点:

  • 下划线应该位于文本基线(baseline)下方
  • 下划线应该可以跳过下行字母
  • 能改变下线线的颜色、粗细和样式
  • 横跨文本
  • 在任何背景下都能正常工作

这些要求并不为过,都是很合理的要求,但据我所知,到目前为止,没有哪个纯 CSS 的方式能满足上述的这些要求。仔细回忆一下,现在在 Web 中能使用 CSS 实现文本下线的方案常见的主要有:

  • text-decoration
  • border-bottom
  • box-shadow
  • background-image
  • text-decoration-*

接下来,我们分别来看看这些方法实现文本下划线效果之间的利弊。

text-decoration

Web 中最早用来给文本添加下划线的属性是text-decoration。只要在元素上使用text-decoration:underline;文本就会有下划线的效果。

如果文本字号较小时,效果看上去还不错,但如果字号变大,效果略显不太完美。这些都是小问题,使用text-decoration属性最大的问题是没办法自定义(没办法自定义下划线的颜色、粗细和样式)。它使用的是colorfont-size来控制下划线的颜色和粗细,但对于下划线的样式,咱们就没办法了。

如果你时常关注 CSS 规范的更新的话,你肯定知道在 CSS Text Decoration Module Level 3 已对text-decoration有所变更,变成了text-decoration-*。这个我们稍后会简单的讨论,如果你迫不急待的话,你可以阅读《更好利用text-decoration属性》一文。

border-bottom

text-decoration制作文本下划线最大的局限性是没办法自定义下划线颜色粗细样式。如果针对于这方面,在 CSS 中的border-bottom可以改善这个局限性。使用border-bottom意味着,你可以改变下划线颜色、粗细和样式风格。

我想大家也已经注意到了,使用border-bottom来模拟文本下划线的时,如果元素是块元素的话,下划线不仅仅是文本内容宽度长,它的长度将是元素盒子的长度。这种效果可不是我们想要的效果。只有元素不是块元素(可以显示的通过display来改变,比如inlineinline-blockinline-flex之类),border-bottom制作的下划线效果看上去才是文本的下划线,而不是容器的边框(事实上它是容器的宽度,只不过容器的宽度和文本内容长度相同)。

另外,text-decoration制作的下划线无法控制下划线和文本之间距离,而border-bottom通过padding-bottom或者说line-height可以轻易的控制。看上去border-bottom优势不少(比如个性化定制,文本间距离),但它也有自己的局限性。除了上面所说的,需要把元素显式的声明为非块元素之外,如果你的文本是多行时,只有最后一行文本才具有下划线效果。

box-shadow

前面介绍的第二种方式是通过border-bottom来模拟text-decoration。大家是否还记得,CSS 的box-shadow可以实现border的效果,那言外之意,box-shadow也可以实现text-decoration。只不过我们采用box-shadow的内阴影inset来模拟:

background-image

在《37 个 CSS3 Patterns Gallery》一文中,@Lea Verou 把 CSS 中的渐变运用的出神入化。那么我们是否可以考虑使用background-image来做文本下划线,而下划线的样式可以通使用linear-gradient来模拟,然后再通过background-postion以及background-size来控制下划线的位置和线型样式。

background-image模拟文本下划线还有一个强大的优势,除了使用渐变属性之外,还可以使用图片,比如下面的示例:

text-decoration-*

我们在说第一种方案的时候,就提到了text-decoration-*属性,这个属性在最新版本中已做了优化。前面提到过,在 CSS 以前的text-decoration规范中,它的局限性是没办法自定义下划线的颜色、粗细、样式和位置。但在最新的版本中已扩展出来几个相关的属性:

  • text-decoration-color
  • text-decoration-style
  • text-decoration-skip

有关于这方面的详细介绍,可以阅读《更好利用text-decoration属性》一文。

具体的效果,可以看下面这个示例:

总结

文章主要介绍了几种纯 CSS 实现文本下划线的效果,其实除了text-decorationborder-bottombox-shadowbackground-image和最新的text-decoration-*方案之外,还有 SVG 和 Canvas 的方案。比如文章最开始提到的@Mary Lou 更疯狂的制作的 Demo ,里面就有 SVG 的方案。对于 Canvas 的方案,如果你感兴趣的话,可以看看 Underline.js,它也可以实现文本下划线的效果。

最后说一下,如果使用border-bottombox-shadow模拟文本下划线的效果时,建议配合伪元素::after::before来实现,这样对于下划线的位置控制更具灵活性。如果你感兴趣的话,可以自己动手试试。

【注:本文源自网络文章资源,由站长整理发布】

扩展阅读

  • Styling Underlines on the Web
  • CSS Underlines Suck
  • Crafting link underlines on Medium
  • Inspiration for Inline Anchor Styles
  • 更好利用 text-decoration 属性
如何美化下划线

大漠

常用昵称“大漠”,W3CPlus 创始人,目前就职于手淘。对 HTML5、CSS3 和 Sass 等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对 CSS3 的研究,是国内最早研究和使用 CSS3 技术的一批人。CSS3、Sass 和 Drupal 中国布道者。2014 年出版《图解 CSS3:核心技术与案例实战》。

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何美化下划线
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址