中空円の中：

Question

私は非常にあなたの助けが必要です:)私は非常にCSSで悪いです、私はリンクとアクティブリンクのための2つのクラスを持っている必要があります。リンククラスは中空円でなければなりません。

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

アクティブな結果はどのようにして得られますか？ハロー・サークルの中の円？ 1つの疑似要素に？どんな提案:)いただき、誠にありがとうございます

Answer 1

あなたは

境界線を削除し、このラインを使用するCSSの放射状のグラデーションを使用することができます。また、

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

チェック以下の例の前に異なる背景をすべて適用する以外にはコンテナは使用されません。before

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

あなたは放射状のグラデーションカラーの割合を変更することで、それをカスタマイズすることができ、またブラウザが

を接頭辞追加することを忘れないでください