サークルDIVで背景色ベースの境界線を作成する方法

Question

borderがDIV色と同じ色と境界線とDIVの間のスペースを調整しようとしました。スペース間のINは、それが点灯しているものの背景色を表示する必要があります。背景色は変更可能であるため、ハードコードしてはいけません。

代わりに、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>

.

問題状態 ホーバーでは、可能であれば、この これを行うためのチュートリアルがある場合、私は学ぶことを嬉しく思います。ありがとう

Answer 1

position:relative;に.mainを設定し、left/right/top/bottomの.main:afterをゼロに設定し、アニメーションのためにtransition:all ease 0.3sを追加します。

.main:hover:after Change 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に追加するためにhover 作業フィドル

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

.

fiddle

Answer 4

代わりに疑似要素を使用することができます。 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;

.

} それが透明でグラデーションやイメージの背後に表示されている場合は、ボックスシャドウを使用することができます。 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;
}

.

fiddle