html5实现边框为圆圈,HTML – 如何在圆形div中创建基于背景颜色的边框？

我试图创建一个圆圈,其边框应与div颜色看起来相同,并且边框和div之间应有空格.空间之间应该显示它所处的div的背景颜色.背景颜色是可变的,所以我们不应该硬编码.

相反,我使用rgba模式给出了透明度.所有工作正常我试图在圆圈悬停时获得此效果,但我无法得到悬停,因为我试图显示：阻止悬停和正常状态下显示：无;这是为后选择器,因此我尝试使用后选择器.

码

CSS

.main{

width:80px;

height:80px;

border-radius:100%;

background-color:#007eff;

text-align:center;

line-height:80px;

}

.main:hover + .main:after{

display:block;

}

.main:after{

width:86px;

height:86px;

border-radius:100%;

background:rgba(255,255,255,0.1);

border:2px solid #007eff;

position:absolute;

content:"";

z-index:-1;

top:3px;

left:3px;

display:none;

}

body{

background-color:#888;

}

HTML

PROBLEM STATE

ON HOVER它应该变得像THIS一样,如果可能的话

如果有任何教程要做,我很乐意学习.谢谢