html - CSS3 剪辑路径或其他东西？

Question

我不知道如何实现这种效果，我熟悉视差效果，但我怎样才能制作这种“剪辑路径”效果或它所谓的任何东西，其中圆圈是透明的，因此可以看到图像背景它？

Answer 1

你可以使用 box-shadow 和 border-radius

body {
  background: linear-gradient(blue, lightblue);
}
html, body {
  height: 100%;
}

.base {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 30px;
}
.inner {
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 40px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 1000px white;
  color: white;
  font-size: 40px;
}

<div class="base">
  <div class="inner">TEST</div>
</div>