html - 倒圆 Angular 边框CSS

Question

我在实现照片上的倒置边框效果方面遇到了很大的问题。我知道如果它是非透明背景它会是什么样子，但是当它完全透明时我无法弄清楚。你有什么想法？感谢您的帮助。

这是我的非透明背景代码示例:

.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;
}

<div class="box">
  
</div>

Example photo

Answer 1

尝试应用这个属性:

border-radius: 100%;

并访问此链接以获得更多说明:

https://codepen.io/sergejmueller/pen/fJEml