css - CSS - 如何在框架内舍入多边形剪辑路径

Question

我在剪辑路径中有一个多边形。我想把里面的切口弄圆。

这是我到目前为止所做的一个片段：

.overlay{
  clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
  display: inline-block;
  background: gray;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  filter: url("#round");

}

<div class="overlay"></div>

    <svg
      style="visibility: hidden; position: absolute;"
      width="0"
      height="0"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
    >
      <defs>
        <filter id="round">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="goo"
          />
          <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
      </defs>
    </svg>

如您所见，外部边框是圆形的，但我只想将框架的内部弄圆。有没有办法做到这一点 ？

标签： cssclip-path