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

除了使用border-bottom下边框格式改动对象下边框色采到达下划线变化无穷的色调效果,还可以经由对css下边框名堂设置装备摆设实线(solid)或虚线(dashed),杀青下划线实线或虚线造诣。

然后咱们CSS+DIV实例实践使用border-bottom完成文字下划线颜色与虚线实线改动。

1、CSS div实例完整html源代码下列

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>下划线各花式 在线演示 css5.com.cn</title> 
<style> 
.divcss-aa{ border-bottom:1px dashed #F00; color:#0FF} 
/* 设置对象.divcss-aa下边框为虚线红色,css字体色彩为天蓝色 */ 
.divcss-bb{ border-bottom:1px solid #00F; color:#090} 
/* 设置对象.divcss-bb下边框为实线蓝色,对象DIV字体色彩为绿色 */ 
</style> 
</head> 
<body> 
<p> 
运用下边框完成字体下划线各类格式功效,<span class="divcss-aa">我下划线为虚线赤色,字体为天蓝色</span> 
<!-- html表明阐明:完成文字字体下划线为红色虚线,字体为天蓝色 --> 
</p> 
<p> 
使用下边框完成字体下划线各种名堂造诣,<span class="divcss-bb">我下划线为实线蓝色,字体为绿色</span> 
<!-- 完成笔墨字体下划线为蓝色实线,字体为绿色 --> 
</p> 
</body> 
</html> 

为何应用span标签而没必要div标签设置笔墨对象CSS花式,可以进入div与span区别去明白。

2、下划线百般式造诣截图

CSS边框样式实现不同样式下划线效果
CSS边框格式完成一致款式下划线成就截图

小结:经过应用边框名目到达下划线多样化。

如需转载,请注明文章出处和来源网址:http://www.yuqseh.com.cn/css-texiao/texiao52735.shtml

重庆彩开奖号码查询结果