HTML怎么自定義下劃線的樣式

這篇文章主要講解了“HTML怎么自定義下劃線的樣式”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“HTML怎么自定義下劃線的樣式”吧！

　　text-decoration屬性

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

　　none：表示標準的文本，什么樣式都沒有

　　underline：表示文本的下劃線

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

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

　　blink：表示閃爍的文本。

　　例：

　　<divstyle="text-decoration:underline;">PHP中文網(wǎng)</div>

　　<divstyle="text-decoration:line-through;">PHP中文網(wǎng)</div>

　　<divstyle="text-decoration:overline;">PHP中文網(wǎng)</div>

　　效果圖：

　　Image20.jpg

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

　　下劃線的自定義：

　　（1）border-bottom方法

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

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

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

　　<h2style="display:inline;border-bottom:2pxsolidpink">PHP中文網(wǎng)</h2>

　　效果圖：

　　Image21.jpg

　?。?）background-image方法

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

　　例：

　　h2{

　　display:inline;

　　background-image:linear-gradient(toright,pink60%,transparent10%);

　　background-position:0100%;

　　background-repeat:repeat-x;

　　background-size:8px3px;

　　padding-bottom:10px;

　　}

感謝各位的閱讀，以上就是“HTML怎么自定義下劃線的樣式”的內容了，經過本文的學習后，相信大家對HTML怎么自定義下劃線的樣式這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！