是否可以用CSS创建弯曲的虚线？

Question

我的目标是创建虚线,就像我在下面的图像中突出显示的那样.这只能用CSS吗？

我的网页使用Bootstrap响应,如果窗口的宽度发生变化,则虚线必须位于正确的位置.

Answer 1

坏消息是你无法弯曲虚线边框.如果在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>