特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果,@Mary Lou更疯狂的制作出了一个Demo,这个Demo展示了多种突出链接的效果,有些是使用的背景色,有些是使用不同的下划线方式。那么,接下来我们一起看看在Web中,如何更好的美化下划线的效果。
在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;
文本就会有下划线的效果。
如果文本字号较小时,效果看上去还不错,但如果字号变大,效果略显不太完美。这些都是小问题,使用
如需转载,烦请注明出处:https://www.w3cplus.com/css/styling-underlines-web.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!