Como criar uma borda baseada na cor de fundo em um círculo div?

Question

Tentei criar um círculo que border deve ter a mesma cor da cor div e um espaço entre a borda e o div.O espaço intermediário deve mostrar a cor de fundo de qualquer div em que ele esteja.a cor de fundo pode ser alterada, portanto não devemos codificá-la.

Em vez disso, dei transparência usando rgba modo.Tudo funcionou bem, estou tentando obter esse efeito ao passar o mouse sobre o círculo, mas não consegui passar o mouse porque estou tentando display:block ao pairar e no estado normal é display:none; Isto é para o seletor posterior, portanto, tentei esse efeito com o seletor posterior.

Código 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>

ESTADO DO PROBLEMAON HOVER deve ficar como ESSE Com efeitos, se possível, se houver algum tutorial para fazer isso, ficarei feliz em aprender.Obrigado

Answer 1

definir position:relative; para o .main E definir left/right/top/bottom do .main:after para zero e adicione transition:all ease 0.3s para animar.

no .main:hover:after mudar left/right/top/bottom para -5px.

demonstração

.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

Basta adicionar .main:hover:after para exibi-lo como block pairando VIOLINO DE TRABALHO

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

Answer 3

Tente algo assim

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>

VIOLINO

Answer 4

você poderia usar box-shadow em vez de pseudo-element :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;

} Se você é transparente e aparecer por trás de um gradiente ou de uma imagem, você ainda pode usar a sombra da caixa: 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

Uma melhoria (apenas para registro) na ideia de uma sombra de caixa apresentada por 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;
}

violino