html - 如何在圆形 div 中创建基于背景颜色的边框？

Question

我试图创建一个圆圈，它的 border 颜色应该与 div 颜色相同，并且 border 和 div 之间有一个空格。中间的空间应该显示它所在的 div 的背景颜色。背景颜色是可变的，因此我们不应该对其进行硬编码。

相反，我使用 rgba 模式提供了透明度。所有工作都很好我试图在圆圈悬停时获得这种效果但我无法获得悬停因为我试图在悬停时 display:block 并且在正常状态下它是 display:none; 这是用于后选择器的，因此我在后选择器上尝试了这种效果。

代码 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

<div class="main"><i class="fa fa-camera-retro fa-lg"></i>
</div>

PROBLEM STATE 在悬停时它应该变成 THIS如果可能的话有效果 如果有任何教程可以做到这一点，我会很乐意学习。谢谢

Answer 1

设置position:relative;到.main并设置.main的left/right/top/bottom: after 为零并添加 transition:all ease 0.3s 用于动画。

在 .main:hover:after 中将 left/right/top/bottom 更改为 -5px。

demo

.main{
    width:80px;
    height:80px;
    border-radius:100%;
    background-color:#007eff;
    text-align:center;
    line-height:80px;
    position:relative;
    margin:6px;
}

.main:after{
    border-radius:100%;
    background:rgba(255,255,255,0.1);
    border:2px solid #007eff;
    position:absolute;
    content:"";
    z-index:-1;
    top:0px;
    left:0;
    bottom:0;
    right:0;
     transition:all ease 0.3s;
}
.main:hover:after{
    top:-5px;
    bottom:-5px;
    right:-5px;
    left:-5px;
}