css给指定文本或者div实现下划线的几种实现方式

某些场合下（例如表单填写、需要打印手写签字等地方）需要给文字或者div增加下划线，这里记录下我遇到的几种实现方案。

文字下划线

给文字添加下划线其实比较简单，使用如下属性：

text-decoration 属性

这个属性可以给文字设置一下装饰效果，比如删除线，下划线啥的。

text-decoration: overline 上划线
text-decoration: line-through 贯穿线
text-decoration: underline 下划线
text-decoration: blink 闪烁
text-decoration: none 无效果

最常用的就是去掉a标签的默认下划线样式。

示例如下：

<html>
<head>
    <style type="text/css">
        h1 {
            text-decoration: overline
        }
        h2 {
            text-decoration: line-through
        }
        h3 {
            text-decoration: underline
        }
        h4 {
            text-decoration: blink
        }
        a {
            text-decoration: none
        }
    </style>
</head>

<body>
    <h1>这是标题 1</h1>
    <h2>这是标题 2</h2>
    <h3>这是标题 3</h3>
    <h4>这是标题 4</h4>
    <p>
        <a href="http://www.w3school.com.cn/index.html">这是一个链接</a>
    </p>
</body>

</html>

以上给文本用text-decoration: underline 做下划线有几个问题，一是下划线距离文本太近，二是下划线都是跟着文本的，不能比文本长，三是下划线的粗细、颜色都是固定的，且不方便所以调整。

下面介绍使用border-bottom来增加下划线，可以解决以上提到的2个问题点。

border-bottom 是通过设置盒子的下边框，可以起到模拟下划线的作用，且定制能力比较强，示例如下：

border-bottom: 1px solid #dbdbdb;  
border-top:0px;  
border-left:0px;  
border-right:0px;

第三种方式：

linear-gradient()

linear-gradient() 函数用于创建一个线性渐变的 "图像"。
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

这个css的函数不算常见，它的作用其实说白了就是创造一张图片。

用渐变函数来模拟下划线，其实是设置背景图片，然后设置宽高，让它看起来像是一个下划线。

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>untitled</title>
<style>

.test::after {
    content: "";
    display: block;
    background: linear-gradient(to right, #188eee, #999);
    width: 100%;
    height: 1px;
}
</style>
</head>
<body>
    <div class='test'>
        <p class='box'>内容</p>
    </div>
</body>
</html>

css给指定文本或者div实现下划线的几种实现方式

文字下划线

text-decoration 属性

linear-gradient()

文章评论