扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >CSS --- 网页中添加下划线样式的方法

CSS --- 网页中添加下划线样式的方法

qsl发布于 2017-07-07 09:49查看:9318回复:1

      在网页中添加下划线

        有很多种添加下划线样式的方法。但有时候只是想创建一个漂亮的看起来正常的下划线。

1499391814922570.png

        这是基本的下划线样式,但是尺寸适中并且避开了下行字母。比大多数浏览器的默认效果要好。事实证明 Medium 为了获得这种样式遇到了很多麻烦。两年过去了,添加一个好看的下划线样式仍然很困难。

     目标

        使用 text-decoration: underline 添加下划线有什么问题吗?如果我们讨论一个理想的场景,下划线应该符合以下特点:

  1. 位于文本基线以下

  2. 避开下行字母

  3. 可以改变颜色、粗细及样式

  4. 适用于文本换行的情况

  5. 适用于任意背景

        我认为这些要求非常合理,但是据我所知,CSS 中还没有简单的方法实现上述所有要求。

     方法

        那么有哪些在网页中添加下划线的方法?

        以下是我能想到的方法:

  1. text-decoration

  2. border-bottom

  3. box-shadow

  4. background-image

  5. SVG 滤镜

  6. Underline.js (canvas)

  7. text-decoration-*

        让我们逐一分析这些方法的优缺点。

     text-decoration

    text-decoration 是添加文本下划线最直接的方式。你只需要应用一个单独的属性就可以全部搞定。字号较小的话,下划线看起来不错,但增加字号之后,同样的下划线就很难看。

        

    text-decoration 的最大问题是缺乏自定义。它继承文字的颜色及字号,并且无法通过跨浏览器的方式改变样式。稍后做详细介绍。

        优点

  1. 易于使用

  2. 位于文本基线以下

  3. 默认在 Safari 和 iOS 上会避开下行字母

  4. 可以换行

  5. 适用于任意背景


        缺点

  1. 在其它浏览器中不能避开下行字母

  2. 不能改变颜色、粗细或样式


     border-bottom

    border-bottom 介于快速及可自定义之间。这种方法使用真正的 CSS border,意味着你可以改变它的颜色、粗细及风格样式。

        以下就是 border-bottom 添加到行内元素上的效果。

        最大的问题是下划线到文本的距离——它完全在下行字母以下。可以通过设置元素为 inline-block 以及减少 line-height 解决这个问题,但是文本换行就不行了。这种方法只适合单行文本,不适合多行文本。

        另外,可以使用 text-shadow 覆盖下行字母附近的下划线,但必须使用与背景色一样的颜色。这意味着只在纯色背景上有效,而不能应用于渐变色或者图片上。


        现在,需要四个属性来定义一个单下划线。相比 text-decoration 的工作量要大。

        优点

  1. 可以使用 text-shadow 避开下行字母

  2. 可以改变颜色、粗细及样式

  3. 可以给颜色及粗细添加 transition 和 animate 属性

  4. 只要不使用 inline-block ,可以换行

  5. 只要不使用 text-shadow ,可以适用于任意背景


        缺点

  1. 下划线距离文本较远,难以定位

  2. 需要很多不想关的属性才能正确显示

  3. 使用 text-shadow 之后选择文本显得粗糙


      box-shadow

    box-shadow 使用两个内阴影画一条下划线:一个用于创建长方形,另一个覆盖在上面。这意味着该属性必须在纯色背景上使用。

        

        同样要使用 text-shadow 的方法伪造下划线与下行字母的间隙。但是如果下划线与文本的颜色不一样,或者太细,并不会像 text-decoration 那样不协调。

        优点

  1. 可以位于文本基线以下

  2. 使用 text-shadow 属性可以避开下行字母

  3. 可以改变颜色及粗细

  4. 可以换行


    缺点

  1. 不能改变样式

  2. 不能适用于任意背景


        background-image

    background-image 是最容易满足我们要求的属性并且问题较少。思路就是通过 linear-gradient 和 background-position 创建沿着文本水平复制的图像。

        这个方法也要设置 display: inline

   下面的方法不必使用 linear-gradient,你可以用自己的图片做出酷炫的效果。

        

        优点

  1. 可以位于文本基线以下

  2. 使用 text-shadow 属性可以避开下行字母

  3. 可以改变颜色、粗细(允许半个像素)及样式

  4. 适用于自定义图片

  5. 可以换行

  6. 只要不使用 text-shadow ,可以适用于任意背景


    缺点

    1. 图片在不同的分辨率、浏览器及缩放级别下可能大小不同

      SVG filters

        我一直在考虑使用 SVG 滤镜的方法。可以创建一个行内 SVG 滤镜元素画一条线,通过扩展文本边界遮盖下行字母附近的下划线。然后给滤镜一个 id ,通过 filter: url(‘#svg-underline’) 在 CSS 中引用它。

        滤镜的优点不需要借助 text-shadow 添加了透明间隙。这意味着可以在任何背景上避开下行字母,包括渐变及图片背景。这种方法只适用于单行文本,需要注意这一点。

       以下是在 Chrome 和 Firefox 中的效果:

1499392259894154.png


        

        text-decoration-* 属性

        

        还记得“稍后做详细介绍”这句话吗?现在就讲到这里了。

        text-decoration 自身可以表现的更好,但是必须添加一些实验性的属性定制它的外观:

      • text-decoration-color

      • text-decoration-skip

      • text-decoration-style

        不要高兴的太早,因为有浏览器兼容的问题。

        text-decoration-color

    text-decoration-color 允许你改变下划线的颜色。这一属性比预期的浏览器支持要好——它可以在 Firefox 以及 Safari (需加前缀)中工作。需要注意的是:如果没有清除下行字母,Safari 中的下划线会位于文本之上。

        Firefox:

1499392335717230.png

        Safari:

1499392360413950.png

        text-decoration-skip

    text-decoration-skip 设置文本下划线是否避开下行字母。

1499392397324119.png

这是一个非标准属性,只在 Safari 中正常工作,所以要加 -webkit- 前缀。Safari 默认使用该属性,所以即使没有设置,下划线也会避开下行字母。

如果你正在使用 Normalize.css ,需要知道当前版本为了浏览器之间的一致性而禁用了该属性。如果你想要这个优秀的下划线样式,你需要自己设置一下。

text-decoration-style

text-decoration-style 提供了和 border-style 一样的线条样式,但是也增加了 wavy 波浪线样式

收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享
qsl  于   2017-07-07 09:53 重新编辑过

版主推荐

    共有1条评论

    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: