CSS秘密花园: 自定义下划线

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

CSS Secrets》是@Lea Verou最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

CSS Secrets

设计师是很挑剔的一群人。我们总是很喜欢自定义一些东西,然后精心设计一番,使得它们和我们想要的视觉效果非常相近,让我们的设计更直观也更易于使用。毕竟,默认的东西很少有我们觉得不错的。

文本下划线就是我们非常喜欢去自定义的东西之一。尽管默认的用起来不错,可是给人一种干扰的感觉,况且它在每一个浏览器中渲染的结果都不一样。尽管文本下划线从web开始普及以来,一直伴随着我们,我们从来没有真正找到更多自定义它们的方式。甚至在CSS到来之后,我们也只是有了一个on/off的权限:

text-decoration: underline;

和之前一样,如果我们没有正好对口的工具,我们就需要自行解决了。我们没有办法自定义文本下划线,所以我们需要用border来伪造。所以第一个想到的CSS技巧:

a[href] {
    border-bottom: 1px solid gray;
    text-decoration: none;
}

虽然使用border-bottom来模拟文本下划线可以让我们控制颜色、粗线还有样式,但这不是完美的。你可以在下图中看到

自定义下划线

这些“下划线”和文本内容之间有一个非常大的空隙,差不多就像是在文本的下一行的位置!我们可以尝试通过给它一个display: inline-block;以及一个较小的line-height值来解决这个问题,如下:

display: inline-block;
border-bottom: 1px solid gray;
line-height: .9;

这确实可以让下划线离文本更近,但是它影响了正常的文本换行,如图所示。

自定义下划线

尝试解决基于border的“下划线”的问题,但是文本需要换行——这样反而乱套了

现在,我们再来尝试使用内阴影box-shadow来模拟下划线:

box-shadow: 0 -1px gray inset;

但是,这和border-bottom有相同的问题,除了它的投影稍微和文本更靠近了一些。有没有什么办法可以得到确定的、灵活的、可自定义的下划线呢?

解决方案

最好的解决方案往往来自最意想不到的地方。在这个示例中,它涉及background-image和其相关属性的作用。你可能会觉得疯狂,但是请先等一下。背景可以非常完美地包裹文本,再根据CSS3 Backgrounds & Borders中一些新的背景相关的属性,如background-size,我们可以对它们有一个非常精确的控制。我们甚至不需要为它们添加单独的HTTP请求,因为我们可以通过CSS渐变生成背景图像:

background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;

你可以在下图中看到非常不错的效果。

自定义下划线

但是我们还可以做一个小的提升。注意到我们的下划线是如何穿过一些像py这样的字母的吗。如果在它们周围有一些适当的空白,岂不是更好吗?如果我们的背景是纯色的,我们可以设置两个text-shadows,其中一个阴影的颜色和我们的背景颜色一样:

background: linear-gradient(gray, gray) no-repeat;
background-size: 100% 1px;
background-position: 0 1.15em;
text-shadow: .05em 0 white, -.05em 0 white;

效果如下所示:

自定义下划线

在这里使用渐变是因为它们非常灵活。例如,创建一个虚下划线,你可以这样写:

background: linear-gradient(90deg,gray 66%, transparent 0) repeat-x;
background-size: .2em 2px;
background-position: 0 1em;

效果如下图所示:

自定义下划线

这样你可以通过色标来控制虚线的间隙,通过background-size来控制它们的尺寸。

作为练习,你可以尝试创建红色波浪下划线,如用于强调拼写错误的那个下划线样式(提示:你需要两个渐变。)你会在下面的示例中找到解决方案,但是在看答案之前,自己先试试——这样会更有趣。

提示:将来的文本下划线

在将来,我们要自定义下划线就不需要再这么繁琐了。在CSS3 Text Decoration中,有几个为此定制的属性,如下:

  • text-decoration-color用于自定义下划线的颜色和一些其它的装饰
  • text-decoration-style用于自定义装饰的样式(如,soliddashedwavy等等)
  • text-decoration-skip用于跳过空格、跨行字母和其它对象
  • text-underline-position用于下划线位置的微调

但是,这些属性目前的浏览器支持非常少。

扩展阅读

如需转载,烦请注明出处:http://www.w3cplus.com/css3/css-secrets/custom-underlines.htmlKyrie 1 Dark Grey Silver Grey Dark Reflect Black Green Glow 705277-001

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css-secrets/custom-underlines.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部