圓圈內空圈：

Question

之前我非常需要你的幫助:)我在css中很差，我需要兩個類一個用於鏈接，一個用於active-links。鏈接類必須是一個空心圓我得到這個：

&:before { 
    content: ''; 
    margin-right: 0.75rem; 
    display: inline-block; 
    vertical-align: -50%; 
    border-radius: 50%; 
    border: 0.3rem solid #ffffff; 
    width: 2rem; 
    height: 2rem; 
    } 

但如何實現活動結果？在聖圈內圈？在一個僞元素上？非常感謝您的任何建議:)

Answer 1

您可以使用徑向漸變在CSS

刪除邊框並使用這一行：前

background:radial-gradient(white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48%); 

檢查也是下面的例子，容器不用於除了具有不同背景之外的任何東西都應用於：之前

HTML

<div class="container"></div> 

CSS

.container 
{ 
    display:inline-block; 
    width:100px; 
    height:200px; 
    position:relative; 
    background-color:#062a40; 
} 

.container:before 
    { 
    content:" "; 
    width:50px; 
    height:50px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate3d(-50%,-50%,0); 
    border-radius:50%; 
    background: -webkit-radial-gradient(white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48%); 
    background: -o-radial-gradient(white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48%); 
    background: -moz-radial-gradient(white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48%); 
    background: radial-gradient(white 20% , rgb(6, 42, 64) 21% , rgb(6, 42, 64) 47% , white 48%); 
    } 

您可以通過更改徑向漸變顏色的百分比定製它，也不要忘了添加瀏覽器的前綴