怎样自定义下划线的款式【html5教程】,下划线

下划线能够经由过程设置border-bottom以及background-image的值来自定义下划线的款式

下划线平常在文本中是一条黑色的直线，那末怎样转变下划线的款式呢？接下来在文章中将为人人细致引见怎样自定义下划线的款式，具有肯定的参考的代价，愿望对人人有所协助。

【引荐课程：CSS教程】

text-decoration 属性

划定添加到文本的润饰。

none ：示意规范的文本，什么款式都没有

underline：示意文本的下划线

overline：示意文本上的一条线。

line-through：示意穿过文本上的一条线，平常示意删除线

blink：示意闪灼的文本。

例：

<div style="text-decoration: underline;">ki4网</div>
<div style="text-decoration:line-through;">ki4网</div>
<div style="text-decoration:overline;">ki4网</div>

效果图：

text-decoration定义的下划线不能转变色彩，也不能设置它的粗细。因而我们能够经由过程别的要领来完成下划线的自定义

下划线的自定义：

（1）border-bottom要领

运用border-bottom来完成文本下划线时，能够转变下划线的色彩，粗细以及款式

但须要注重当元素为块级元素时，下划线不仅仅是文本内容的长度，它会占满一行，这时候就须要经由过程display：inline将块级元素转化为行级元素。如许的话文本的长度就和下划线的长度一样了

例：让下划线变成粉色2px粗

<h1 style="display:inline;border-bottom:2px solid pink">ki4网</h1>

效果图：

（2）background-image要领

在 background-image要领中经由过程运用线性渐变的要领来设置下划线，在这里依然要记着当元素为块级元素时注重将其转变成行级元素

例：

h1{
			display: inline;
			background-image:linear-gradient(to right,pink 60%,transparent 10%);
			background-position: 0 100%;
			background-repeat: repeat-x;
			background-size: 8px 3px;
			padding-bottom: 10px;
		}

效果图：

background-image要领还能够用图片替代下划线

h1{
			display: inline;
			background-image:url("images/xing.jpg");
			background-position: 0 100%;
			background-repeat: repeat-x;
			background-size:13px;
			padding-bottom: 10px;
		}

效果图：