CSS - 带有外边框虚线的双/偏移边框

Question

我想制作一个圆形，其外部虚线边框偏离主圆圈。我附上了一张图片供参考。

我尝试使用box shadow来实现这一点，但到目前为止还没有运气。有没有办法做到这一点？

Answer 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>）

Answer 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;
}

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