应用视觉设计：「04」使用文本装饰属性 text-decoration 为文本增加装饰线

路条编程 2020-08-20

278

欢迎关注路条编程的公众号，通过学习应用视觉设计这一系列文章，你将会逐步掌握页面版式、色彩、图形、动画和布局相关的基础知识。

今天我们要介绍的内容是使用文本装饰属性 text-decoration 为文本增加装饰线。我们在使用文本时，经常要在文本上增加一些装饰线效果，例如下划线、删除线等。在 CSS 中是通过文本装饰属性 text-decoration 来实现相应效果的。text-decoration 可选值为 none 、 underline 、 overline 、 line-through 、 blink ，具体释义如下所示：

值               描述
none            没有文本装饰效果
underline       在文本的下方有一条装饰线，简称下划线
overline        在文本的上方有一条修饰线，简称上划线
line-through    有一条贯穿文本中间的修饰线，简称删除线
blink           文本闪烁（文本交替处于显示与隐藏状态）

默认情况下，文本都是没有装饰线的，但超链接是个例外，它默认就带有下划线。当然，可以把 text-decoration 属性的值设置为 none，去掉超链接的下划线，当鼠标悬停后，再添加下划线，来提醒用户当前文本为链接文本。

要给文本加下划线，可以使用文本装饰属性 text-decoration 的 underline 值来实现。加下划线通常用来表示文本的某一部分很重要，或者需要记住的东西。文本装饰线的另一个常见用法，就是修订文本，在被删除文本上增加删除线。给文本增加删除线，可以使用文本装饰属性 text-decoration 的 line-through 值来实现。还可以使用 text-decoration 属性，为文本同时添加多条装饰线。样式类定义如下：

<style type="text/css">
    .lighter {
      font-weight: lighter;
       text-decoration: underline overline line-through;
    }
</style>

我们在文章 “ 应用视觉设计：「03」使用 width、height 属性调整元素宽高及设置文本字体的粗细 ” 代码的基础上，将段落中 “一杯苦酒” 增加多条装饰线的效果。在页面样式类 fw-100 、fw-300 、 fw-900 基础上，分别增加下划线、删除线及上划线，调整代码如下所示：

<style type="text/css">
    .fw-100 {
      font-weight: 100;
      text-decoration: underline;
    }
    .fw-300 {
      font-weight: 300;
      text-decoration: line-through;
    }
    .fw-900{
      font-weight: 900;
      text-decoration: overline;
    }


    .lighter {
      font-weight: lighter;
       text-decoration: underline overline line-through;
    }
</style>

大家可以通过示例页面或下面的完整效果图比较下应用样式的效果，最终效果如下：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

应用视觉设计：「04」使用文本装饰属性 text-decoration 为文本增加装饰线

评论