html - 在 CSS 中创建挖空透明边框

Question

我想用 CSS 创建一个元素的边框 - 消除直到背景的透明度:

这就是目标:

但我能创建的只是这样的边框:

.circle {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: solid 10px rgba(255,0,255,0.5);        
    background: #bbbbff;
  }

是否有可能创建这样的透明边框？

使用透明作为边框颜色不起作用。

Answer 1

您可以尝试如下:

.box {
  width: 200px;
  height: 150px;
  border: 15px solid #0000; /* transparent border to create the space */
  background:
    /* your circle placed at top right (width=60px, height=60px) */
    radial-gradient(50% 50%,#bbbbff 98%,#0000) top right/60px 60px no-repeat border-box,
    /* the conic-gradient will simulate the border of 4px */
    conic-gradient(from 90deg at 4px 4px,#0000 90deg,#000 0) 0 0/calc(100% - 4px) calc(100% - 4px) padding-box,
    /* red is the main background color*/
    red padding-box;
   /* use mask to cut a border around the circle 
      #000  = visible
      #0000 = invisible (the cut part)
   */
  -webkit-mask:radial-gradient(closest-side at top 30px right 30px,#000 60%,#0000 61% 98%,#000); 
}


body {
  background:pink;
}

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