我想生成一个外虚线边框偏离主圆的圆。我附上了一张照片以供引用。
我已经尝试使用盒子阴影来实现这一点,但到目前为止还没有成功。有办法做到这一点吗?
最佳答案
我能够通过使用伪元素选择器 ::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>
)
关于CSS - 双/偏移边框,外边框为虚线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21538299/