首頁 > web前端 > css教學 > 主體

如何自訂底線的樣式

清浅
發布: 2021-04-20 14:45:34
原創
11657 人瀏覽過

自訂底線的樣式的方法:1、使用border-bottom來實現文字下劃線;2、在background-image方法中透過使用線性漸變的方法來設定下劃線。

如何自訂底線的樣式

本文操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

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

text-decoration 屬性

規定加入到文字的修飾。

none :表示標準的文本,什麼樣式都沒有    

#underline:表示文字的底線

overline:表示文字上的一條線。   

line-through:表示穿過文字上的一條線,一般表示刪除線    

blink:表示閃爍的文字。   

範例:

<div style="text-decoration: underline;">PHP中文网</div>
<div style="text-decoration:line-through;">PHP中文网</div>
<div style="text-decoration:overline;">PHP中文网</div>
登入後複製

效果圖:

Image 20.jpg

text-decoration定義的底線不能改變顏色,也無法設定它的粗細。因此我們可以透過別的方法來實現下劃線的自訂

下劃線的自訂:

#(1)border- bottom方法

使用border-bottom來實現文字下劃線時,可以改變下劃線的顏色,粗細以及樣式

但需要注意當元素為區塊級元素時,下劃線不僅僅是文字內容的長度,它會佔滿一行,這時就需要透過display:inline將區塊級元素轉換為行級元素。這樣的話文本的長度就和底線的長度一樣了

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

<h1 style="display:inline;border-bottom:2px solid pink">PHP中文网</h1>
登入後複製

效果圖:

Image 21.jpg


如何自訂底線的樣式


#(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;
		}
登入後複製
效果圖:##################總結:以上就是這篇文章的全部內容了,希望對大家有幫助。 #########【推薦課程:#########CSS教學##########】#######

以上是如何自訂底線的樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板