CSS是否可以创建曲线虚线？

Question

CSS是否可以创建曲线虚线？

javascripthtmlcsstwitter-bootstrap

4

我的目标是创建像我在下面的图片中突出显示的虚线。这只能使用CSS吗？

我的网页使用Bootstrap进行响应式设计，如果窗口的宽度发生变化，则虚线必须处于正确的位置。

- Mammad2c

1

这些图片有一个jpg扩展名，但是当我尝试将它们编辑到你的答案中时，SO说它们不支持该格式。由于我知道JPG是一种支持的格式，所以我不打算打开那些。 - T.J. Crowder

请尝试此链接：http://s0.uploads.im/pWtA0.jpg - Mammad2c

尝试创建一个带有虚线底部边框的元素，然后使用CSS设置所需的正确宽度（即您的虚线宽度），最后为圆形元素设置正确的z-index值（例如z-index：9999），并为扮演虚线角色的元素设置z-index值（例如z-index：-1）。 - X9DESIGN

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- X9DESIGN · Accepted Answer

The bad news is that you can't bend the dashed border. Its always be solid if you use border-radius in CSS. But as i think this example will steer you to the right solution.

    #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>