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>