倒圆形边框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