使用css border实现字体下划线为实线还是虚线

除了使用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.divcss5.com/css-texiao/texiao52735.shtml