CSS3 클립 경로 또는 다른 것?

Question

이 효과를 얻는 방법을 알지 못합니다. 시차 효과에 익숙하지만,이 "클립 경로"효과 또는 무엇이든 호출 할 수 있습니다. 원이 투명하여 이미지 배경을 볼 수 있습니다. ?

이

Answer 1

당신은 상자 그림자 및 테두리 반경을 사용할 수 있습니다

body { 
 
    background: linear-gradient(blue, lightblue); 
 
} 
 
html, body { 
 
    height: 100%; 
 
} 
 

 
.base { 
 
    width: 200px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    margin: 30px; 
 
} 
 
.inner { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 40px; 
 
    border-radius: 50%; 
 
    box-shadow: 0px 0px 0px 1000px white; 
 
    color: white; 
 
    font-size: 40px; 
 
}

<div class="base"> 
 
    <div class="inner">TEST</div> 
 
</div>