这篇文章主要讲解了“HTML怎么自定义下划线的样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML怎么自定义下划线的样式”吧！
text-decoration属性
规定添加到文本的修饰。
none：表示标准的文本，什么样式都没有
underline：表示文本的下划线
overline：表示文本上的一条线。
line-through：表示穿过文本上的一条线，一般表示删除线
blink：表示闪烁的文本。
例：
<divstyle="text-decoration:underline;">PHP中文网</div>
<divstyle="text-decoration:line-through;">PHP中文网</div>
<divstyle="text-decoration:overline;">PHP中文网</div>
效果图：
Image20.jpg
text-decoration定义的下划线不能改变颜色，也不能设置它的粗细。因此我们可以通过别的方法来实现下划线的自定义
下划线的自定义：
（1）border-bottom方法
使用border-bottom来实现文本下划线时，可以改变下划线的颜色，粗细以及样式
但需要注意当元素为块级元素时，下划线不仅仅是文本内容的长度，它会占满一行，这时就需要通过display：inline将块级元素转化为行级元素。这样的话文本的长度就和下划线的长度一样了
例：让下划线变成粉色2px粗
<h2style="display:inline;border-bottom:2pxsolidpink">PHP中文网</h2>
效果图：
Image21.jpg
（2）background-image方法
在background-image方法中通过使用线性渐变的方法来设置下划线，在这里仍然要记住当元素为块级元素时注意将其改变为行级元素
例：
h2{
display:inline;
background-image:linear-gradient(toright,pink60%,transparent10%);
background-position:0100%;
background-repeat:repeat-x;
background-size:8px3px;
padding-bottom:10px;
}
感谢各位的阅读，以上就是“HTML怎么自定义下划线的样式”的内容了，经过本文的学习后，相信大家对HTML怎么自定义下划线的样式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
