」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何使用 CSS 自訂文字下劃線顏色?

如何使用 CSS 自訂文字下劃線顏色?

發佈於2024-11-08
瀏覽:833

How to Customize Text Underline Colors with CSS?

使用 CSS 自訂文字下劃線顏色

在網頁設計中,為文字添加下劃線是強調或突出顯示訊息的常見做法。但是,如果您想透過更改下劃線的顏色來添加獨特的觸感該怎麼辦?這可能嗎?

是的,可以使用 CSS 來變更文字下方線條的顏色。您可以使用以下兩種方法:

方法 1:使用 text-decoration-color

方法 1:使用 text-decoration-color

text-decoration-color: blue;
例如,要建立帶有藍色底線的紅色文字,您可以使用以下CSS:

text-decoration-color: blue;

方法2:使用border-bottom

border-bottom: 1px solid blue;
text-decoration: none;
例如,以下是使用 border-bottom 實現與方法 1 相同的效果的方法:

border-bottom: 1px 純藍色; text-decoration: none;

How to Customize Text Underline Colors with CSS? 
注意:

現代瀏覽器支援 text-decoration-color 屬性。如果您需要支援較舊的瀏覽器,您可能需要使用 border-bottom 方法來實現相容性。

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3