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

2022-09-29 54点热度 0人点赞 0条评论

某些场合下(例如表单填写、需要打印手写签字等地方)需要给文字或者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>

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论