13518219792
这篇文章主要讲解了“HTML怎么自定义下划线的样式”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML怎么自定义下划线的样式”吧！
成都创新互联是一家集网站建设,华安企业网站建设,华安品牌网站建设,网站定制,华安网站建设报价,网络营销,网络优化,华安网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。
text-decoration属性
规定添加到文本的修饰。
none：表示标准的文本，什么样式都没有
underline：表示文本的下划线
overline：表示文本上的一条线。
line-through：表示穿过文本上的一条线，一般表示删除线
blink：表示闪烁的文本。
例：
效果图：
Image20.jpg
text-decoration定义的下划线不能改变颜色，也不能设置它的粗细。因此我们可以通过别的方法来实现下划线的自定义
下划线的自定义：
（1）border-bottom方法
使用border-bottom来实现文本下划线时，可以改变下划线的颜色，粗细以及样式
但需要注意当元素为块级元素时，下划线不仅仅是文本内容的长度，它会占满一行，这时就需要通过display：inline将块级元素转化为行级元素。这样的话文本的长度就和下划线的长度一样了
例：让下划线变成粉色2px粗
效果图：
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怎么自定义下划线的样式这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
