CSS - 外边框虚线的双/偏移边框答案

【问题标题】：CSS - double/offset border with outer border dashedCSS - 外边框虚线的双/偏移边框
【发布时间】：2014-02-04 06:03:21
【问题描述】：

我想制作一个外虚线边框偏离主圆的圆。我附上一张图片供参考。

我已经尝试使用盒子阴影来实现这一点，但到目前为止还没有运气。有没有办法做到这一点？

【问题讨论】：

我得到了this。但是，background-color 仍然留在点之间。也许其他人可以更接近它。
多么令人费解的想法:)
我们是否也假设这必须仅应用于单个元素？
也试过了，让我引用“border-radius 100% will not result in a dotted/dashed circle, because the entire radius is considered a corner”来自：bugzilla.mozilla.org/show_bug.cgi?id=382721

标签： css border

【解决方案1】：

我可以通过使用伪元素选择器::before 来获得这种效果。（::after 也可以）

这是DEMO

给定元素：

<div class="circle"></div>

应用以下 CSS 规则：

.circle {
    position: relative;
    float: left;
    border: 2px dotted black; /* This is the outer border (dotted) */
    background-color: white; /* This is the color of the inner border */
    padding: 10px; /* This is the size of the inner border */
    border-radius: 50%;
}

.circle::before {
    position: absolute;
    display: block;
    content: ' ';
    background-color: #6abde7; /* This is the color of the inner circle */
    width: 150px; /* This controls how wide the circle will be. Remember to subtract padding + border */
    height: 150px; /* This controls how tall the circle will be. Remember to subtract padding + border */
    border-radius: 50%;
}

您可以调整上面的一些规则。它们主要是为了给演示圈定形。我已经评论了控制圆圈样式的那些。

说明

您基本上是通过 CSS 在容器元素内添加一个元素。 这不适用于不支持内容的元素。（即<input>）

【讨论】：

@HashemQolami 看起来像！
我更喜欢你的，有相对单位:)
谢谢，这个技巧很好......我将如何在内圈内添加居中文本？
@Ben 我实际上认为 HashemQolami 的解决方案更适合这种情况。请参阅此处使用他的解决方案的示例：jsfiddle.net/sPGsS/4

【解决方案2】：

DEMO

.circle {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:#cef;
    border:3px dotted #000;
    box-shadow:inset 0 0 0 10px #fff;
}

更新

使用:after

DEMO

.circle {
    height:200px;
    width:200px;
    border-radius:50%;
    background-color:#fff;
    border:3px dotted #000;
}

.circle:after {
    content:' ';
    display:block;
    height:180px;
    width:180px;
    border-radius:50%;
    background-color:#cef;
    position:relative;
    top:10px;
    left:10px;
}

【讨论】：

我在上面的 cmets 中遇到了同样的问题。背景颜色在点之间。

【解决方案3】：

你不能有第二个 div 有什么原因吗？ http://jsfiddle.net/gUYFF/1/

.outline {
float:left;
border: dotted 2px black;
width: 220px;
height: 220px;
border-radius: 110px;
box-shadow: 0 0 0 10px white inset;
}
.circle {
    background-color: #6abde7;
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin:10px;
}
<div class="outline"><div class="circle"></div></div>

【讨论】：