css镂空效果圆形

您可以使用CSS的`mask`属性来实现镂空效果。首先，创建一个圆形的`div`元素，然后使用`mask-image`属性将其设置为一个与该元素相同大小的黑色圆形，接着使用`mask-position`和`mask-size`属性将其居中并缩放到与圆形元素相同大小。最后，使用`background-color`属性设置圆形元素的背景色即可。示例代码如下：

HTML：

<div class="circle"></div>

CSS：

.circle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='50' fill='black'/></svg>");
  -webkit-mask-position: center;
  -moz-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  -moz-mask-size: contain;
  mask-size: contain;
}

在这个例子中，我们使用SVG创建了一个黑色圆形，然后将其作为`mask`属性的值设置到了`div`元素上。通过`-webkit-mask-position`、`-moz-mask-position`和`mask-position`将其居中，通过`-webkit-mask-size`、`-moz-mask-size`和`mask-size`将其缩放到与圆形元素相同大小。最后，通过`background-color`设置圆形元素的背景色。