divhtml下边加横线_css中下划线的⼏种实现⽅案
在给⽂字或者某布局盒⼦写样式的时候，为了更好看，或者更显眼，可能会⽤到下划线，在此记录⼀下⼏种实现⽅案。
⽂字下划线
给⽂字添加下划线其实⽐较简单
text-decoration 属性
这个属性允许对⽂本设置某种效果，如加下划线。如果后代元素没有⾃⼰的装饰，祖先元素上设置的装饰会“延伸”到后代元素中。不要求⽤户代理⽀持 blink。
简单来说就是这个属性可以给⽂字设置⼀下装饰效果，⽐如删除线，下划线啥的。
最常⽤的就是去掉a标签的默认下划线样式。
实例：
h1 {
text-decoration: overline
}
h2 {
text-decoration: line-through
div border属性}
h3 {
text-decoration: underline
}
h4 {
text-decoration: blink
}
a {
text-decoration: none
}
这是标题 1
这是标题 2
这是标题 3
这是标题 4
实例1
(⽂字修饰的颜⾊可以通过color设置)
盒⼦下划线
border-bottomborder-bottom缩写属性设置⼀个声明中所有底部边框属性。
可以设置的属性分别(按顺序)：border-bottom-width, border-bottom-style，和border-bottom-color.
border-bottom 通过设置盒⼦的下边框，可以起到模拟下划线的作⽤
实例:
border-bottom: 1px solid #dbdbdb;
border-top:0px;
border-left:0px;
border-right:0px；实例2
linear-gradient()linear-gradient() 函数⽤于创建⼀个线性渐变的 "图像"。
为了创建⼀个线性渐变，你需要设置⼀个起始点和⼀个⽅向(指定为⼀个⾓度)的渐变效果。你还要定义终⽌⾊。终⽌⾊就是你想让Gecko去平滑的过渡，并且你必须指定⾄少两种，当然也会可以指定更多的颜⾊去创建更复杂的渐变效果。
这个css的函数不算常见，它的作⽤其实说⽩了就是创造⼀张图⽚。
⽤渐变函数来模拟下划线
，其实是设置背景图⽚，然后设置宽⾼，让它看起来像是⼀个下划线。
实例：
菜鸟教程(runoob)
.test::after {
content: "";
display: block;
background: linear-gradient(to right, #188eee, #999);
width: 100%;
height: 1px;
}
内容
实例3
⽤这个⽅法创建的下划线，可⾃定义程度最⾼。
可以绘制出很好看的下划线，甚⾄可以对他定义动画~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。