7种实现下划线的方法

最新推荐文章于 2024-05-29 11:16:42 发布

Wangdanting123

最新推荐文章于 2024-05-29 11:16:42 发布

阅读量1.3w

点赞数 1

本文链接：https://blog.csdn.net/Wangdanting123/article/details/53457281

版权

关键字扫盲

1.“descenders” 指的是一个字体中，字母向下延伸超过基线的笔画部分，也称为下延部。

方法一 text-decoration

优点：1.使用方便 2.定位在基线下面 3.在Safari和iOS里跳过了descenders 4.多行也没问题 5.所有的背景也ok

缺点：1.在其他浏览器里不能跳过descenders 2.不能修改颜色，厚度和样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
        }
        h1{
            text-decoration: underline;
        }
        p{
            font-size: 20px;
        }
        span {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div>
        <h1>方法一 text-decoration</h1>
        <p>wangdanting wangdanting <span>wangdanting wangdanting wangdanting wangdanting wangdanting </span>王丹婷 王丹婷 <span>王丹婷 wangdanting <span>wangdanting wangdanting <span>王丹婷 王丹婷 王丹婷 王丹婷</span> wangdanting wangdanting wangdanting</p>
    </div>
</body>
</html>

方法二：border-bottom

优点：1.用text-shadow可以跳过descenders 2.可以改变颜色，厚度和样式 3.可以对颜色和厚度实施渐变和动画 4.inline-block自动包裹 5.用text-shadow可以支持任意背景

缺点：1.边框线就在descenders下面，可以使元素变成inline-block然后增加line-height来改变距离，但就失去了包裹文本的能力，所有只能单行文本这样做 2.定位很远，而且很难重定位 3.需要使用一系列不相干的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
        }
        h1{
            display: inline-block;
            border-bottom: 2px solid #000;
            line-height: 40px;
        }
        p{
            font-size: 20px;
        }
        span {
            border-bottom: 2px solid #000;
        }
    </style>
</head>
<body>
    <div>
        <h1>方法二 botder-bottom</h1>
        <p>wangdanting wangdanting <span>wangdanting wangdanting wangdanting wangdanting wangdanting </span>王丹婷 王丹婷 <span>王丹婷 wangdanting <span>wangdanting wangdanting <span>王丹婷 王丹婷 王丹婷 王丹婷</span> wangdanting wangdanting wangdanting</p>
    </div>
</body>
</html>

方法三：box-shadow

优点: 1.可以定义在基线下面 2.用text-shadow可以跳过descenders(没实现） 3.可以改变颜色，厚度 4.多行也能生效

缺点：1.不能修改样式，只能是直线 2.不能在渐变和背景图的情况下生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
        }
        h1{
            font-size: 20px;
            box-shadow: inset 0 -0.175em white, inset 0 -0.2em #000;
            display: inline;
        }
        p{
            font-size: 20px;
        }
        span {
            background-size: 1px 1em;
            box-shadow: inset 0 -0.175em white, inset 0 -0.2em #000;
        }
    </style>
</head>
<body>
    <div>
        <h1>方法三 box-shadow</h1>
        <p>wangdanting wangdanting <span>wangdanting wangdanting wangdanting wangdanting wangdanting </span>王丹婷 王丹婷 <span>王丹婷 wangdanting <span>wangdanting wangdanting <span>王丹婷 王丹婷 王丹婷 王丹婷</span> wangdanting wangdanting wangdanting</p>
    </div>
</body>
</html>

方法四： text-decoration-* 属性 text-decoration-color text-decoration-skip text-decoration-style

缺点：只有火狐浏览器支持的相对较好，其它的都不行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 500px;
        }
        h1{
            text-decoration: underline;
            text-decoration-color: red;
        }
        p{
            font-size: 20px;
        }
        span {
            text-decoration: underline;
            text-decoration-color: red;
            -webkit-text-decoration-skip: edges;
            text-decoration-style: dashed;
        }
    </style>
</head>
<body>
    <div>
        <h1>方法四 text-decoration-*</h1>
        <p>wangdanting wangdanting <span>wangdanting wangdanting wangdanting wangdanting wangdanting </span>王丹婷 王丹婷 <span>王丹婷 wangdanting <span>wangdanting wangdanting <span>王丹婷 王丹婷 王丹婷 王丹婷</span> wangdanting wangdanting wangdanting</p>
    </div>
</body>
</html>