歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

阿森纳热刺 www.tzxsac.com.cn 對3組文字設置裝備擺設三種分歧色調下劃線,離別css命名為“.CSS5-F00”、“.CSS5-00F”、“.CSS5-333”

1、字體下劃線色彩不同完成殘破HTML源代碼:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>無題目文檔</title> 
<style> 
.CSS5-F00{ border-bottom:1px solid #F00} 
/* CSS注解說明:.CSS5-F00 配置對象下邊框為紅色 */ 
.CSS5-00F{ border-bottom:1px solid #00F; color:#090} 
/* CSS注釋說明:.CSS5-00F 配置對象下邊框為藍色 翰墨為綠色 */ 
.CSS5-333{ border-bottom:1px solid #333} 
/* CSS標明注明:.CSS5-333 設置裝備擺設對象下邊框為玄色 */ 
</style> 
</head> 
<body> 
<p> 
CSS5實踐之翰墨下劃線色調-<span class="CSS5-F00">我的下劃線完成為紅色</span> 
</p> 
<p> 
CSS5實際之翰墨下劃線色彩-<span class="CSS5-00F">我的下劃線完成為藍色,翰墨為綠色</span> 
</p> 
<p> 
CSS5理論之文字下劃線色彩-<span class="CSS5-333">我的下劃線實現為彩色</span> 
</p> 
</body> 
</html> 

2、分歧顏色下劃線實例成效截圖

css border下邊框樣式實現不同顏色下劃線效果
使用css border下邊框款式實現差異色調下劃線功效截圖

通過以上DIV+CSS實例,我們籠統學會應用border-bottom格式對翰墨字體配置下邊框色調實現對下邊框色調格式扭轉,從而抵達下劃線色調牽制成績。咱們要了解到text-decoration下劃線色彩是隨文字色采改變而扭轉,換句話說,運用text-decoration屬性實現下劃線的色調與文字顏色是同步的,文字甚么色調,筆墨下劃線即是甚么顏色,要改動其文字和下劃線翰墨色采差別,咱們可應用border-bottom邊框名目。

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/css-texiao/texiao52734.shtml