كيفية إنشاء الحدود لون الخلفية على أساس في شعبة دائرة?

Question

حاولت إنشاء دائرة التي border يجب أن تبدو نفس لون ديف اللون والمسافة بين الحدود و ديف.بين الفضاء يجب أن تظهر لون الخلفية من أي وقت مضى ما ديف هو عليه.لون الخلفية قابل للتغيير لذا لا ينبغي لنا ترميزه.

بدلا من ذلك لقد أعطيت الشفافية باستخدام rgba الوضع.كل العمل بشكل جيد أحاول الحصول على هذا التأثير على تحوم الدائرة ولكن لم أتمكن من الحصول على تحوم لأنني أحاول display:block على تحوم وفي الحالة الطبيعية هو display:none; هذا هو لمحدد بعد ومن ثم حاولت هذا التأثير مع بعد محدد.

كود المغلق

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

أتش تي أم أل

<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

جرب شيئا كهذا

المغلق :

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

أتش تي أم أل :

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

كمان

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

تحسن (فقط للسجل) على انه فكرة مربع الظل كما مرافقة من قبل غسيريلوس

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

كمان