css 图片实现反向圆角

在CSS中，要实现图片的反向圆角，通常需要利用伪元素`::before`和`::after`配合`content`属性，并结合一些负边距技术。这里是一个简单的例子：

img {
  position: relative;
  display: inline-block; /* 或者display: block */
  overflow: hidden;
}

img::before,
img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* 要求的圆角大小 */
}

/* 如果想要顶部外侧是圆形 */
img::before {
  background: rgba(0, 0, 0, 0.5); /* 遮罩颜色透明度 */
  z-index: -1;
}

img::after {
  background-image: url('your-image-url'); /* 替换为实际图片路径 */
  background-size: cover;
  opacity: 1; /* 如果你的背景图有透明部分，可以调整此值 */
  z-index: 0;
}

在这个例子中，我们首先创建了两个绝对定位的伪元素，分别设置为黑色半透明用于遮挡原始图片并露出中心部分，然后在`::after`上设置了你要显示的图片。通过调整`z-index`，我们可以让图片在遮罩之上。