倒圓形的邊框css

-2

我在實現倒影邊框效果上存在很大問題，就像在照片上一樣。我知道它是如何看待它是否是一個不透明的背景，但當它完全透明時卻無法弄清楚。你有什麼想法？謝謝你的幫助。倒圓形的邊框css

這裏是我的非透明背景的代碼示例：

.box { 
 
width: 100px; 
 
height: 120px; 
 
margin: 0 auto; 
 
position: relative; 
 
background-image: radial-gradient( transparent 0px, transparent 10px, orangered 10px, orangered ); 
 
background-size: 20px 20px; 
 
background-position: -10px -10px; 
 
&:before, &:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    background-color: orangered; 
 
} 
 
&:before { 
 
    top: 0; 
 
    right: 10px; 
 
    bottom: 0; 
 
    left: 10px; 
 
} 
 
&:after { 
 
    top: 10px; 
 
    right: 0; 
 
    bottom: 10px; 
 
    left: 0; 
 
} 
 
} 
 

 

 
.inner-round { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: orangered; 
 
}