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

Question

我试图创建一个圆圈 border 应该看起来与div颜色相同的颜色以及边框和div之间的空格。之间的空间应该显示它所在的div的背景颜色。背景颜色是可变的，所以我们不应该硬编码它。

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

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

问题状态 在悬停它应该变得像 这 如果可能的话，效果 如果有任何教程可以做到这一点，我很乐意学习。谢谢

Answer 1

套装 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;
}

Answer 2

只需添加 .main:hover:after 以显示为 block 在悬停 工作小提琴

.main:hover:after{
    display:block; 
}

Answer 3

尝试这样的事情

CSS :

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

}
.main:hover:after{
      width:86px;
    height:86px;
    border-radius:100%;
    background:rgba(255,255,255,0.1);
    border:2px solid #007eff;
    position:absolute;
    content:"";
    z-index:111;
    top:3px;
    left:3px;

}
body{
    background-color:#888;
}

HTML格式 :

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

小提琴

Answer 4

您可以使用box-shadow代替伪元素 :http://jsfiddle.net/Ku6BQ/24/

.main {
    width:80px;
    height:80px;
    border-radius:100%;
    background-color:#007eff;
    text-align:center;
    line-height:80px;
}
.main:hover {
    box-shadow: 0 0 0 4px #888888, 0 0 0 6px #007eff;
}
body {
    background-color:#888;

} 如果您将其透明并显示在渐变或图像后面，您仍然可以使用box-shadow : http://jsfiddle.net/Ku6BQ/25/ http://jsfiddle.net/Ku6BQ/26/

.main {
    width:80px;
    height:80px;
    border-radius:100%;
    box-shadow:inset 0 0 0 100px #007eff;
    text-align:center;
    line-height:80px;
}
.main:hover {
    border:4px transparent solid;
    margin:-4px;
    box-shadow: 0 0 0 2px #007eff,
        inset 0 0 0 100px #007eff;;
}
html {
    background :#888 url(http://lorempixel.com/200/200/nature) repeat;
height:100%;    
}

Answer 5

一个改进（只是为了记录）他的想法一个盒子阴影由GCyrillus应用

.main {
    width:80px;
    height:80px;
    border-radius:100%;
    background-color:#007eff;
    text-align:center;
    line-height:80px;
    border: solid 4px transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 0px white;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.main:hover {
    box-shadow: 0 0 0 6px #007eff;
}
body {
    background-color:#888;
}

小提琴