HTML怎么自定义下划线的样式

这篇文章主要讲解了“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怎么自定义下划线的样式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！