css中如何设置虚线、css设置虚线长度…

2023-03-03 23:27 25次浏览攻略

说到Css点线风格，你应该想到border的solid。在web布局中，solid最常用。带有CSS虚线的效果也可以用图片创建背景。但是不建议。如果可能，使用CSS虚线样式创建该虚线的效果，则CSS虚线样式为border的dotted和dashed。

1.dotted虚线

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虚线！</div>
</body>
</html>

效果：

2.dashed虚线

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虚线</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虚线！</div>
</body>
</html>

效果：

除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！

原文链接：

1.文章《css中如何设置虚线、css设置虚线长度…》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

2.文章《css中如何设置虚线、css设置虚线长度…》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

css中如何设置虚线、css设置虚线长度…

相关推荐