实现下划线的N个姿势

下划线 一般在文档中常被用作增强注意,在过去打字机时代,下划线成为了唯一的一种文字强调方式,具体的操作方法是在已经打出来的文字上面退格,再在同样的地方打出下划线。

而在网页中,可以链接的文字(超链接)下面一般都有下划线。在制作页面的时候,当链接需要下划线的时候,UI开发很自然的会想到使用text-decoration属性来显示,例如这样:

以上显示的是设计稿和浏览器渲染的实际效果,我们会发现浏览器渲染的效果和设计稿有出入,主要表现在下划线的位置,这时候细心的设计师会要求你想办法实现他们本来想要实现的效果。可惜的是,在这几年的网页排版技术发展中,并没有更好的css属性出现来支持下划线的个性化设置,所以这个问题常常会被忽略。

这个一般在UI开发看来,可能觉得并没有什么问题,难道说不应该使用text-decoration这个属性吗?

首先我们还是从实际想要表现的效果来说:

  • 能够支持换行
  • 能够改变颜色、线条样式和粗细
  • 能够被其它元素正常的包裹
  • 在所有浏览器都能正常显示

以上特性其实text-decoration都只是部分实现,尤其是在表现的细节上让人觉得有些瑕疵,如果我们非要吹毛求疵,应该怎么办呢?

那么,我们还有什么其它方法可以去尝试吗?

以下是我列举的一些方案,我们一个个的来看:

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

首先,我们先来看看text-decoration这个属性,w3c给它的定义的是允许对文本设置某种效果,比如加下划线,但是缺点是,不能自定义样式,比如下划线的颜色,线条的粗细,都不可以自定义。

代码:

预览:

border-bottom本来是用来设置元素下边框样式的,我们可以拿来方便的自定义下划线的颜色,粗细,距离。

代码:

预览:

同样,我们还可以尝试使用text-shadow,这个属性不仅能应用阴影文本,还可以用来模拟下划线的效果:

代码:

预览:

可是好像依然不支持换行,如果是单行文本的情况下可以考虑使用。

那是不是不可以使用呢?其实我们还有box-shadow,不仅能够给元素添加阴影:

代码:

预览:

其实,我们也可以通过text-decoration-style来设置下划线的,比如它专有的几个属性:

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

我们可以使用text-decoration-color来设置下划线的颜色,这样终于不用像之前,下划线颜色总是跟随于文本颜色

text-decoration-skip属性,表示当字符和下划线发生重叠的时候,是跳过文字字符,还是直接贯穿:

还可以通过text-decoration-style设置线条的样式,比如solid(实线)、double(双线)、dotted(点状线条)、dashed(虚线)、wavy(波浪线);

好吧,可惜的是,目前text-decoration-*只有火狐支持这些属性,就连我们常用的Chrome也都不支持,如果非要支持的话,还需要手动开启"实验性网络平台功能"才可以。

以上尝试,虽然在一定程度上呈现我们想要的效果,但是都受限于浏览器的兼容性问题,那么是不是没有别的选择呢?

总结:

如果只是单纯的线条样式的话,我们可以直接使用背景渐变的方法linear-gradient制作下划线,比如这样,当然如果你只需要支持最新的浏览器版本,

代码:

预览:

所以,如果我们要考虑所有的浏览器都要正常显示,并且对线条样式有特殊要求,比如曲线或者下面这种更特殊的线条背景,我们还是直接使用固定的图片背景定位background-image来平铺的好。

代码:

预览:

最后

先写到这!大致梳理了一下几种实现下划线的方法,在特殊的场景下虽然都各自的优缺点,希望能够给大家提供一些思路。

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。

注明出处格式:腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2016-12-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专知

【GAN货】生成对抗网络知识资料全集(论文/代码/教程/视频/文章等)

【导读】当地时间 10月 22 日到10月29日,两年一度的计算机视觉国际顶级会议 International Conference on Computer V...

3264
来自专栏机器人网

电气设备中的颜色都代表什么?

一、依导线颜色标志电路时 1、黑色 装置和设备的内部布线。 2、棕色 直流电路的正极。 3、红色 三相电路和C相; 半导体三极管的集电极; 半导体二极管...

2976
来自专栏CreateAMind

PC 预测编码 论文

Representation Learning with Contrastive Predictive Coding https://arxiv.org/pdf...

643
来自专栏生信技能树

ChIP-seq实战分析

作者注 本次讲解选取的文章是为了探索PRC1,PCR2这样的蛋白复合物,不是转录因子或者组蛋白的CHIP-seq,请注意区别。 文章题目 RYBP and Cb...

3136
来自专栏一棹烟波

图像添加径向畸变

通常摄像机的镜头都会有镜头畸变,尤其是广角镜头,在做图像处理中往往会通过摄像机标定获取镜头的畸变系数,然后进行畸变校正。而在某些特殊的情况下,你可能会需要往图像...

2116
来自专栏AI科技大本营的专栏

ICLR vs arxiv-sanity

我觉得交叉对比 ICLR 2017(一个备受欢迎的深度学习大会)的论文决策(分为四类:Oral、Poster、Workshop 和 Reject)与所有论文在 ...

3385
来自专栏专知

【论文推荐】最新5篇视频分类相关论文—上下文门限、深度学习、时态特征、结构化标签推理、自动机器学习调优

【导读】专知内容组整理了最近五篇视频分类(Video Classification)相关文章,为大家进行介绍,欢迎查看! 1.Learnable pooling...

3275
来自专栏CreateAMind

周末轻松一刻,欣赏完全由程序自己回忆的视频片段

962
来自专栏机器之心

资源 | 谷歌与MIT联袂巨著:《计算机科学的数学》开放下载

选自CSAIL.Mit 机器之心编译 参与:蒋思源、吴攀 谷歌和麻省理工学院联袂出品的《计算机科学的数学》昨日已经开放下载了,读者可点击文末「阅读原文」下载。...

2617
来自专栏量化投资与机器学习

【代码+论文】最全LSTM在量化交易中的应用汇总

我们的论坛社区上线啦! https://bbs.mlqi.org 希望大家多去逛逛,学习交流,共享智慧。这个社区就是为大家解答、学习、交流在量化投资和机器学习方...

7078

扫码关注云+社区