圆圈内空圈：

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%); 
    } 

您可以通过更改径向渐变颜色的百分比定制它，也不要忘了添加浏览器的前缀