使用css border-bottom实现改变文字字体下划线颜色

对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边框名目。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css-texiao/texiao52734.shtml