CSS下劃線變顏色的技巧

我們為大家收集整理了關於CSS下劃線變顏色，以方便大家參考。這裡我們對3組文字設置三種不同顏色下劃線，分別css命名為“.divcss5-F00”、“.divcss5-00F”、“.divcss5-333”

二、使用css border實現字體下劃線為實線還是虛線 - TOP

1、字體下劃線顏色不同實現完整HTML源代碼：

 

 

 

 

 

 

 

 

DIVCSS5實踐之文字下劃線顏色-

 

 

 

DIVCSS5實踐之文字下劃線顏色-

 

 

 

DIVCSS5實踐之文字下劃線顏色-

 

 

 

通過以上DIV+CSS實例，我們可以學會使用border-bottom樣式對文字字體設置下邊框顏色實現對下邊框顏色樣式改變，從而達到下劃線顏色控制效果。我們要認識到text-decoration下劃線顏色是隨文字顏色改變而改變，換句話說，使用text-decoration屬性實現下劃線的顏色與文字顏色是同步的，文字什麼顏色，文字下劃線就是什麼顏色，要改變其文字與下劃線文字顏色不同，我們可以使用border-bottom邊框樣式。

2、使用css border實現字體下劃線為實線還是虛線   -   TOP

除了使用border-bottom下邊框樣式改變對象下邊框顏色到達下劃線千變萬化的顏色效果，還可以通過對css下邊框樣式設置實線(solid)或虛線(dashed)，達成下劃線實線或虛線效果。

接下來我們CSS+DIV實例實踐使用border-bottom實現文字下劃線顏色和虛線實線改變。

1、CSS div實例完整html源代碼如下

 

 

 

 

 

 

 

通過以上DIV+CSS實例，我們可以學會使用border-bottom樣式對文字字體設置下邊框顏色實現對下邊框顏色樣式改變，從而達到下劃線顏色控制效果。我們要認識到text-decoration下劃線顏色是隨文字顏色改變而改變，換句話說，使用text-decoration屬性實現下劃線的顏色與文字顏色是同步的，文字什麼顏色，文字下劃線就是什麼顏色，要改變其文字與下劃線文字顏色不同，我們可以使用border-bottom邊框樣式。

2、使用css border實現字體下劃線為實線還是虛線   -   TOP

除了使用border-bottom下邊框樣式改變對象下邊框顏色到達下劃線千變萬化的顏色效果，還可以通過對css下邊框樣式設置實線(solid)或虛線(dashed)，達成下劃線實線或虛線效果。

接下來我們CSS+DIV實例實踐使用border-bottom實現文字下劃線顏色和虛線實線改變。

1、CSS div實例完整html源代碼如下

 

 

 

 

 

 

 

 

使用下邊框實現字體下劃線各種樣式效果，

 

 

 

使用下邊框實現字體下劃線各種樣式效果，

 

 

 

為什麼使用span標簽而不用div標簽設置文字對象CSS樣式，可以進入div與span區別去了解。

希望大家可以學會CSS下劃線變顏色想了解更多精彩內容，請關注我們的網站!

相關推薦：

css設置層透明的技巧