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

rram 发表于 Dev

笑

我试图创建一个圆形，它的border外观应与div颜色相同，并且边框和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>

问题状态悬停它应该成为像这与效果，如果可能的，如果有任何的教程要做到这一点，我会快乐地学习。谢谢

莫森野生动物园

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

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

演示

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