CSS, daire ve kenarlık arasında boş boşluk bırakılarak, dolduktan çevrelerin çevresine kenarlık oluşturur

Question

Bu öğeleri yalnızca CSS ile birlikte oluştururken sorun yaşıyorum. Küçük, beyaz dolu bir daire oluşturdum. Ama ben bu çemberin :hover etkisi üzerinde beyaz bir yuvarlak sınır olmasını istiyorum. o :hover üzerinde böyle görünmeli

Thats:

Burada birkaç fikir buldum ama bunların hiçbiri çalışmıyor gibi görünüyor. outline'u kullanmayı denedim ama sonunda box-shadow ile yapılması gerekmiş gibi hissediyorum?

My Result (Fiddle)

alternatif bir çözüm görüntüleri yüklemek olacaktır: Şu anda

ben bu sonucu var. Bu resmi oluşturabilir ve :hover’da gösterebilirim. Ama bu en iyi uygulama değil, bu hedefin CSS ile nasıl başarılacağını bilmek isterim.

Teşekkürler.

Answer 1

Kullanım iki kutu gölgeleri bir yerine:

.navi-dots li { 
 
    width: 8px; 
 
    height: 8px; 
 
    margin: 25px 0 25px 0; 
 
    background-color: #ffffff; 
 
    -webkit-border-radius: 50px; 
 
    /* Safari, Chrome */ 
 
    -moz-border-radius: 50px; 
 
    /* Firefox */ 
 
    border-radius: 50px; 
 
    /* CSS3 */ 
 
} 
 

 
.navi-dots li:hover { 
 
    box-shadow: 0 0 0 6px #000, 0 0 0 7px #ffffff; 
 
} 
 

 
body { 
 
    background-color: black; 
 
}

<ul class="list-unstyled navi-dots"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Ve sadece eğlence için ...

.navi-dots li { 
 
    width: 8px; 
 
    height: 8px; 
 
    margin: 25px 0 25px 0; 
 
    background-color: #ffffff; 
 
    -webkit-border-radius: 50px; 
 
    /* Safari, Chrome */ 
 
    -moz-border-radius: 50px; 
 
    /* Firefox */ 
 
    border-radius: 50px; 
 
    /* CSS3 */ 
 
    
 
    transition: all .2s ease; 
 
    box-shadow: 0 0 0 0 #000, 0 0 0 0 #ffffff; 
 
} 
 

 
.navi-dots li:hover { 
 
    box-shadow: 0 0 0 6px #000, 0 0 0 7px #ffffff; 
 
} 
 

 
body { 
 
    background-color: black; 
 
}

<ul class="list-unstyled navi-dots"> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
    <li></li> 
 
</ul>

Answer 2

Eğer css kullanabilirsiniz Bu burada için :before Özellik Örnek https://jsfiddle.net/qvjs66v5/1/ Yani basit

.navi-dots li { 
    width: 8px; 
    height: 8px; 
    margin: 25px 0 25px 0; 
    background-color: #ffffff; 
    -webkit-border-radius: 50px; 
    /* Safari, Chrome */ 
    -moz-border-radius: 50px; 
    /* Firefox */ 
    border-radius: 50px; 
    /* CSS3 */ 
    position:relative; 
} 
.navi-dots li:before { 
    position:absolute; 
    width:16px; 
    height:16px; 
    top:-6px; 
    left:-6px; 
    border-radius:100%; 
    border:2px solid #fff; 
    display:none; 
    content:""; 
} 
.navi-dots li:hover:before { 
    display:block 
} 

body { 
    background-color: black; 
}