使用CSS实现中间镂空的图片遮罩效果

在HTML和CSS中，你可以通过创建一个透明度渐变的圆形或矩形背景，然后将它作为`<img>`元素的父元素来实现中间镂空的图片遮罩效果。这是一种常见的CSS层叠和伪元素应用技巧。以下是简单的步骤：

1. 创建一个包含图片的容器 `<div>`，并设置它的宽度和高度与图片相等。

<div class="mask">
  <img src="your-image.jpg" alt="...">
</div>

2. 对`.mask`类添加样式，使其背景变为半透明圆角边框，可以使用 `::before` 和 `::after` 伪元素来创建遮罩效果。

.mask {
  position: relative;
  width: 200px; /* 图片尺寸 */
  height: 200px; /* 图片尺寸 */
  overflow: hidden;
}

.mask::before,
.mask::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%; /* 圆形遮罩 */
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5) 60%); /* 渐变透明度 */
}

/* 如果需要矩形遮罩，改变border-radius */
.mask.rectangle::before,
.mask.rectangle::after {
  border-radius: 4px 4px 0 0; /* 上下圆角，左右方形 */
}

3. 这样就实现了图片中心区域透明，周围有一圈半透明边缘的效果。如果你想调整遮罩的位置、大小或颜色，只需修改对应的CSS属性即可。