小編給大家分享一下css自定義下劃線(xiàn)樣式的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站開(kāi)發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),響應(yīng)式網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢(xún)和貼心的售后服務(wù)。歡迎咨詢(xún)做網(wǎng)站需要多少錢(qián):13518219792

下劃線(xiàn)可以通過(guò)設(shè)置border-bottom以及background-image的值來(lái)自定義下劃線(xiàn)的樣式

下劃線(xiàn)一般在文本中是一條黑色的直線(xiàn)，那么如何改變下劃線(xiàn)的樣式呢？接下來(lái)在文章中將為大家詳細(xì)介紹如何自定義下劃線(xiàn)的樣式，具有一定的參考的價(jià)值，希望對(duì)大家有所幫助。

text-decoration 屬性

規(guī)定添加到文本的修飾。

none ：表示標(biāo)準(zhǔn)的文本，什么樣式都沒(méi)有

underline：表示文本的下劃線(xiàn)

overline：表示文本上的一條線(xiàn)。

line-through：表示穿過(guò)文本上的一條線(xiàn)，一般表示刪除線(xiàn)

blink：表示閃爍的文本。

例：

創(chuàng)新互聯(lián)
創(chuàng)新互聯(lián)
創(chuàng)新互聯(lián)

效果圖：

text-decoration定義的下劃線(xiàn)不能改變顏色，也不能設(shè)置它的粗細(xì)。因此我們可以通過(guò)別的方法來(lái)實(shí)現(xiàn)下劃線(xiàn)的自定義

下劃線(xiàn)的自定義：

（1）border-bottom方法

使用border-bottom來(lái)實(shí)現(xiàn)文本下劃線(xiàn)時(shí)，可以改變下劃線(xiàn)的顏色，粗細(xì)以及樣式

但需要注意當(dāng)元素為塊級(jí)元素時(shí)，下劃線(xiàn)不僅僅是文本內(nèi)容的長(zhǎng)度，它會(huì)占滿(mǎn)一行，這時(shí)就需要通過(guò)display：inline將塊級(jí)元素轉(zhuǎn)化為行級(jí)元素。這樣的話(huà)文本的長(zhǎng)度就和下劃線(xiàn)的長(zhǎng)度一樣了

例：讓下劃線(xiàn)變成粉色2px粗

創(chuàng)新互聯(lián)

效果圖：

（2）background-image方法

在 background-image方法中通過(guò)使用線(xiàn)性漸變的方法來(lái)設(shè)置下劃線(xiàn)，在這里仍然要記住當(dāng)元素為塊級(jí)元素時(shí)注意將其改變?yōu)樾屑?jí)元素

例：

h2{
			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方法還可以用圖片代替下劃線(xiàn)

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

效果圖：

以上是css自定義下劃線(xiàn)樣式的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！