答案 0 :(得分:6)
坏消息是你无法弯曲虚线边框。如果在CSS中使用border-radius,它始终是可靠的。但正如我认为这个例子将引导您找到正确的解决方案。
#wrapper {
width: 680px;
display:table;
margin: auto;
}
#wrapper > div {
display: inline-block;
}
.circle {
position:relative;
padding: 20px;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #eee;
border: solid 1px #ddd;
z-index: 999;
}
.line-top {
width: 120px;
height:60px;
z-index: -1;
background: transparent;
border: none;
border-top: dashed 2px orange;
padding: 40px 40px;
border-radius: 50%;
margin: 20px -50px 0;
}
.line-bottom {
width: 120px;
height:60px;
z-index: -1;
background: transparent;
border: none;
border-bottom: dashed 2px orange;
padding: 40px 40px;
border-radius: 0 0 50% 50%;
margin: 0 -65px;
}
<div id="wrapper">
<div class="circle"></div>
<div class="line-top"></div>
<div class="circle"></div>
<div class="line-bottom"></div>
<div class="circle"></div>
</div>