css - 剪辑图像并添加边框以适合 div

Question

我希望从图像 src 中剪裁一个 80px 的圆圈，以便在剪裁部分周围添加一个红色边框（圆圈），然后适合 div 框。

以下是一个示例，但红色边框不起作用。我希望剪辑的部分只适合 div，但现在 div 大小是原始图像大小。

.my-clip {
  position: absolute;
  clip-path: circle(80px at 50% 25%);
  border:1px solid red;//wish to get a circle border around the clipped portion
  background-color: #bdbdbd;
  box-sizing: border-box;
}

.square {
     position: relative;
     width: 300px;     
     height: 300px;
     overflow: hidden;
     border: 1px solid red;
  }

<div class="square">
<img class="my-clip"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>

更新： 我尝试使用 calc 函数来更改位置，但看起来数学不正确！

.my-clip {
  position: absolute;
  --x: 150px;
  --y: 100px;
  left: calc(80px + 5px - var(--x));
  top: calc(80px + 5px - var(--y));
  clip-path: circle(80px at var(--x) var(--y));
  background-color: #bdbdbd;
}

.square {
     position: relative;
     width: 170px;     
     height: 170px;
     overflow: hidden;
     border: 5px solid lightgray;
     border-radius:50%;
  }

<div class="square">
<img class="my-clip"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>

Answer 1

调整不同的值，你可以用border-radius做到这一点：

.my-clip {
  position: absolute;
  left: 50%;
  top: -6%;
  transform: translate(-50%);
  /*clip-path: circle(80px at 50% 25%); no more needed*/
  background-color: #bdbdbd;
}

.square {
  position: relative;
  width: 160px;
  height: 160px;
  overflow: hidden;
  border: 1px solid red;
  border-radius: 50%;
}

<div class="square">
  <img class="my-clip" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/300px-Tux.svg.png" alt="alternatetext">
</div>