원형 div에 배경색 기반 테두리를 만드는 방법은 무엇입니까?

Question

나는 원을 만들려고 노력했다. 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>

문제 상태ON HOVER는 다음과 같아야합니다 이것 가능하면이를 위해 튜토리얼이 있으면 효과가 있습니다. 기꺼이 배우게 될 것입니다.감사해요

Answer 1

세트 position:relative; ~로 .main 그리고 설정 left/right/top/bottom ~의 .main:after 0으로 추가하고 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를 추가하여 호버 작업 피들

.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

vox-shadow- intudo 요소를 사용할 수 있습니다. 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;

.

} 그것이 그것이 투명하고 그라디언트 또는 이미지 뒤에 표시되는 경우, "nofollow"> 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;
}

.

바이올린