文中演示环境:宏基S40-51、Windows10 家庭中文版、HTML5&&CSS3&&HBuilderX.3.0.5。 推荐:《css视频教程》 css设置虚线的方法 通过设置虚线边框来设置虚线:
所以可以先创建一个<div>标签: <div class="xuxian"></div> 然后将该边框的高度设置为0,将上边框或者下边框其中一个设置为一个像素的虚线。 具体如下: .xuxian{ width:100%; height:0; border-bottom:red 1px dashed;} /*red表示虚线的颜色为红色,1px表示边框宽度为一个像素,dashed表示边框线型为虚线*/ 效果图:
css代码: hr{border:blue 1px dashed} 效果图: 完整代码如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css设置虚线</title> <style> .xuxian{ width:100%; height: 60px; border-bottom: red 1px dashed;} /*red表示虚线的颜色为红色,1px表示边框宽度为一个像素,dashed表示边框线型为虚线*/ hr{border:blue 1px dashed} </style> </head> <body> <div class="xuxian"></div> <hr> </body> </html> 更多计算机编程相关知识,请访问:编程教学!! |