完全透明边框的圆形剪裁？

Question

我正在开发一个有“联系我们”按钮的项目。该按钮需要状态指示。我已阅读以下文章，其中显示了头像图像上的状态指示。最酷的一点是它有一个完全透明的边框（它还剪切了位于指示器边框下方的图像部分）。

我想完成同样的事情，但是使用按钮元素，但我不知道如何做到这一点。

我的代码的简单版本：

button {
  border-radius: 50%;
  width: fit-content;
  aspect-ratio: 1;
  border: none;
  background-color: purple;
  padding: 1rem;
}

<button>
    <img src="chat.svg" width="50px" />
</button>

我尝试将标签和类更改为与我的文档相对应的标签和类，但它弄乱了整个事情。我发现 mask-property 不适用于图像以外的任何东西（如果我是正确的）。我不使用任何图像，所以这使得它必须理解并找到替代方案。

Answer 1

该代码旨在处理图像，但使用按钮我们可以做得更容易

button {
  --g: 5px;  /* gap */
  --r: 20px; /* circle size*/

  font-size: 30px;
  padding: .5em 1em;
  border-radius: .25em;
  border: none;
  background: 
   radial-gradient(calc(var(--r)/2 + var(--g)) at 100% 100%,
   #0000 95%,red);
  border-image:
    radial-gradient(50% 50%,blue 95%,#0000) 
    100%/0 var(--r) var(--r) 0/
    0 calc(var(--r)/2) calc(var(--r)/2) 0;
}

<button>Button</button>

如果您想了解

border-image

语法，请阅读以下内容：https://www.smashingmagazine.com/2024/01/css-border-image-property/