html中text-decoration_html中设置下划线的方法

本文主要介绍了HTML中设置下划线的方法，具有一定的参考价值，有兴趣的朋友可以参考一下，希望大家看完本文后能够有所收获，下面就让小编带大家一起来了解一下吧。

html中设置下划线的方法：1、通过text-属性给文本添加下划线；2、通过“-”设置框下划线；3、通过“-()”模拟下划线。

本文的运行环境：系统、HTML5版本、Dell G3电脑。

CSS中下划线的几种实现方案

在编写文本或布局框的样式时，可能会使用下划线来使其看起来更好或更显眼。以下是一些实现解决方案。

下划线文本

给文本加下划线其实很简单

文本属性

此属性允许在文本上设置某些效果，例如下划线。如果祖先元素上设置的装饰没有自己的装饰，则“扩展”到后代元素。用户代理不需要支持闪烁。

简单来说，该属性可以为文字设置装饰效果，比如删除线，下划线等等。

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

例子：

    
        h2 {
            text-decoration: overline
        }
        h3 {
            text-decoration: line-through
        }
        h4 {
            text-decoration: underline
        }
        h5 {
            text-decoration: blink
        }
        a {
            text-decoration: none
        }
    


    
这是标题 1
    
这是标题 2
    
这是标题 3
    
这是标题 4
    

        这是一个链接
    

示例 1

（文字修改的颜色可以通过color设置）

方框下划线

-

- 简写属性，在一个声明中设置所有底部边框属性。

可以设置的属性有（按顺序）：--width、--style 和 --color。

- 通过设置盒子的下边框，可以模拟下划线的效果

例子：

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

示例 2

-()

-() 函数用于创建线性渐变“图像”。

要创建线性渐变，您需要设置渐变移动的起点和方向（指定为角度）。您还需要定义结束颜色。结束颜色是您希望 Gecko 平滑过渡的颜色，您必须至少指定两种颜色，但您可以指定更多颜色以创建更复杂的渐变。

这个CSS函数并不是很常用，简单来说，它的作用就是创建一个图片。

使用渐变函数模拟下划线

，其实就是设置背景图片，然后设置宽高，让它看起来像下划线一样。

例子：

内容