hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

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

2019-11-26HTML搜搜PHP网53°c
A+ A-
下划线能够经由过程设置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;
		}

效果图:

总结:以上就是本篇文章的全部内容了,愿望对人人有所协助。

以上就是怎样自定义下划线的款式的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
怎样自定义下划线的款式【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: