介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> css文字下划线样式& lt;/title>
& lt; style>
.demo跨度{
文字修饰:下划线;
}
& lt;/style>
& lt;/head>
& lt; body>
类& lt; p=癲emo"祝辞;这是一段测试文字,& lt; span> & lt;/span> ! & lt;/p>
& lt;/body>
& lt;/html> & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title> css文字下划线样式& lt;/title>
& lt; style>
.demo {
宽度:400 px;
身高:400 px;
保证金:100 px的汽车;
}
.demo1跨度{
边界底部:1 px固体# 000000;
}
.demo2跨度{
边界底部:5 px固体# 0081 ef;
}
.demo3跨度{
边界底部:2 px冲# 000000;
}
.demo4跨度{
边界底部:2 px点缀# 000000;
}
.demo5跨度{
边界底部:5 px双# 000000;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=癲emo"祝辞
类& lt; p=癲emo1"在这是第1段测试文字,& lt; span> & lt;/span> ! & lt;/p>
类& lt; p=癲emo2"在这是第2段测试文字,& lt; span> & lt;/span> ! & lt;/p>
类& lt; p=癲emo3"在这是第3段测试文字,& lt; span> & lt;/span> ! & lt;/p>
类& lt; p=癲emo4"在这是第4段测试文字,& lt; span> & lt;/span> ! & lt;/p>
类& lt; p=癲emo5"在这是第5段测试文字,& lt; span> & lt;/span> ! & lt;/p>
& lt;/div>
& lt;/body>
& lt;/html>
这篇文章将为大家详细讲解有关css添加文字下划线样式的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
首先我们来了解一下<强> css添加文字下划线样式的方法有哪些。
1, css文本装饰属性添加文字下划线样式
2, css边界底部属性添加文字下划线样式
下面我们通过简单的代码示例,为大家详细介绍一下这两种css添加文字下划线样式的实现方法!
<强> css文本装饰属性添加简单文字下划线样式
代码示例:
效果图:
css文本装饰属性添加的下划线是最简单样式,而且没有办法设置什么比较特别的样式,比如把下划线设置成虚点状的。下面我们看看另一种添加下划线的方法,可以设置不同的下划线样式。
<强> css边界底部属性添加文字下划线样式
代码示例:
效果图:
边界底部属性可以通过控制线的粗细,颜色,样式来实现不同的文字下划线样式。
关于css添加文字下划线样式的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
