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

发布时间：2020-12-14 18:29:54 所属栏目：资源来源：网络整理

导读：我试图创建一个圆圈,其边框应与div颜色看起来相同,并且边框和div之间应有空格.空间之间应该显示它所处的div的背景颜色.背景颜色是可变的,所以我们不应该硬编码. 相反,我使用rgba模式给出了透明度.所有工作正常我试图在圆圈悬停时获得此效果,但我无法得到悬停

我试图创建一个圆圈,其边框应与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,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
ON HOVER它应该变得像THIS一样,如果可能的话
如果有任何教程要做,我很乐意学习.谢谢

解决方法

设定位置：相对;到.main并设置.main的左/右/上/下：后到零并添加转换：所有缓动0.3秒用于动画.

在.main：hover：将左/右/上/下更改为-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,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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!