CSS - 双/偏移边框，外边框为虚线

Question

我想生成一个外虚线边框偏离主圆的圆。我附上了一张照片以供引用。

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

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