虚线设置

两种：1.border 里的 dashed；2. 利用div自定义

圆设置

块元素的border-radius属性设置边角曲率

虚线圆源代码

<h1>border属性dashed虚线圆</h1>
<div class="dashedCircle"></div>

<style>
/* border 虚线圆 */
.dashedCircle{
	margin:10px auto;
	width:100px;
	height:100px;
	border:1px dashed black;
	border-radius:100px/100px;
}
</style>

效果

码笔网-在线代码编辑器和前端Web开发人员的社交平台​animpen.com/pen/mOGkFR正在上传…重新上传取消

---

拓展

border 属性提供的 dashed 不太好看，也不能调整！！！！！！

所以自定一个虚线（利用div和background的属性）

HTML

<div class="dashedLine"></div>

CSS

.dashedLine{
	margin:50px auto;
	width:500px;
	height:2px;
	background-image:linear-gradient(to right,#000 0%, #000 50%, transparent 75%);
	background-size:20px 10px;
	background-repeat:repeat-x;
}

---

自定义虚线圆待思考