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

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計、做網(wǎng)站、中衛(wèi)網(wǎng)絡(luò)推廣、小程序制作、中衛(wèi)網(wǎng)絡(luò)營銷、中衛(wèi)企業(yè)策劃、中衛(wèi)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供中衛(wèi)建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

下劃線可以通過設(shè)置border-bottom以及background-image的值來自定義下劃線的樣式

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

text-decoration 屬性

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

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

underline：表示文本的下劃線

overline：表示文本上的一條線。

line-through：表示穿過文本上的一條線，一般表示刪除線

blink：表示閃爍的文本。

例：

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

效果圖：

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

下劃線的自定義：

（1）border-bottom方法

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

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

例：讓下劃線變成粉色2px粗

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

效果圖：

（2）background-image方法

在 background-image方法中通過使用線性漸變的方法來設(shè)置下劃線，在這里仍然要記住當(dāng)元素為塊級元素時注意將其改變?yōu)樾屑壴?/p>

例：

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方法還可以用圖片代替下劃線

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

效果圖：

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

網(wǎng)站題目：css自定義下劃線樣式的方法-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://weahome.cn/article/dejgjh.html