Html 用完全透明的边框切割出圆圈

发布于05月07日

我正在做一个有联系我们按钮的项目.该按钮需要状态指示.我已经阅读了以下article个在化身图像上显示状态指示的内容.最酷的事情是dat有一个完全透明的边界(它还切割了位于指示器边界下的图像部分).

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

我的代码的简单版本:

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>

我试图将标签和类更改为与我的文档对应的标签和类，但它把整个事情搞砸了.我发现面具属性不适用于图像以外的任何其他东西(如果我是正确的).我不使用任何图像，所以这使得它必须理解并找到替代方案.

推荐答案

该代码旨在处理图像，但对于按钮，我们可以更容易地处理

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