提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 怎样自定义下划线的款式【css教程】,下划线

下划线能够经由过程设置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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"怎样自定义下划线的款式【css教程】,下划线"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线