동그라미 안의 원 안에 :

Question

나는 아주 많이 당신의 도움이 필요하다. 나는 CSS가 매우 좋지 않다. 나는 링크를위한 두 개의 클래스와 액티브 링크를위한 하나의 클래스가 필요하다. 링크 클래스는 중공환이어야합니다.

&: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%); 

확인 아래의 예를하기 전에 컨테이너는 다른 배경을 사용하는 것 이외의 용도로 사용되지 않습니다. 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%); 
    } 

당신은 방사형 그라데이션 색의 비율을 변경하여 사용자 정의 할 수 있습니다, 또한 브라우저가

접두사를 추가하는 것을 잊지 마세요