欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

对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.xuroms.com.cn/css-texiao/texiao52734.shtml

欢乐二人雀神游戏