html clip-path: circle(50% at 50% 50%); 反向实现空心圆

HTML `clip-path` 属性用于裁剪元素的内容区域，通过提供一种路径描述来指定裁剪边界。当你设置 `circle(50% at 50% 50%)` 时，它会创建一个半径为元素自身宽度或高度50%的圆形，并将圆心设在元素的中心点 (50%, 50%)，结果是一个实心的圆形。

如果你想要实现一个空心圆的效果，你可以通过将 `circle()` 替换为 `inset-circle()` 或者负的 `circle()` 来反向裁剪。以下是两种方法：

1. 使用 `inset-circle()`: 这个语法会在原有圆形内部创建一个内切圆，使得外部的圆形部分被裁剪掉，形成空心效果。

   <div style="clip-path: inset-circle(50% at 50% 50%);">
     <!-- 元素内容 -->
   </div>

2. 使用负半径 `circle(-50% at 50% 50%)`: 这里减去的是圆的直径的一半，所以实际上裁剪出来的形状是一个比元素略小的圆形，内部显示内容，外部为空。

   <div style="clip-50% at 50% 50%);">
     <!-- 元素内容 -->
   </div>

相关问题

使用 clip-path: circle(50% at 50% 50%);裁剪图片时怎么保留非圆形区域

使用 `clip-path` 属性时，可以使用多个图形来定义一个复杂的裁剪区域。因此，要保留非圆形区域，可以使用多个圆形来定义一个不规则的形状。

例如，如果要保留圆形以外的区域，可以使用两个圆形，一个大圆形和一个小圆形。大圆形定义整个裁剪区域，小圆形定义要保留的区域。在 CSS 中，可以这样定义：

.clip {
  clip-path: circle(50% at 50% 50%) circle(20% at 50% 50%);
}

这将创建一个裁剪区域，其中心点在图像的中心，半径为 50% 的大圆形，和半径为 20% 的小圆形，小圆形定义的区域将被保留，裁剪后的图像将保留小圆形以外的区域。

clip-path: polygon多边形如何实现圆角

`clip-path` 的 `polygon` 元素用于通过定义一个多边形区域来剪裁元素的内容显示部分。如果要实现圆角效果，通常需要将多边形的顶点设置为一系列弧度值，模拟出圆形边缘。但是，标准的 CSS `polygon` 定义不直接支持圆角，因为它是基于直线连接的顶点。

不过，你可以通过一些技巧来间接创建类似的效果：

1. **近似圆角**: 可以创建一个有大量角度的锐角多边形，并调整顶点的位置，使其在视觉上接近圆形。例如，可以使用16个等分的角度来构成一个看起来像圆的形状。

.clip-rounded {
   clip-path: polygon(50% 0%, calc(50% + 5px) 0%, 100% 5px, 100% calc(50% - 5px), calc(50% + 5px) 100%, 50% calc(100% - 5px), 0% 100%, 5px 95%, calc(50% - 5px) 95%, 0% 100%);
}

2. **SVG 矢量路径**: 如果对兼容性和灵活性要求较高，可以考虑使用 SVG `<path>` 标签，它可以更精确地描绘圆角。定义一个 `d` 属性，其中包含圆形的贝塞尔曲线。

<svg>
   <mask id="rounded-mask">
      <path d="M...Z" /> <!-- 这里是一个描述圆角的 SVG 路径 -->
   </mask>
   <div class="circle" mask="url(#rounded-mask)">
      <!-- 内容 -->
   </div>
</svg>

然后在 CSS 中应用这个 `mask`:

.circle {
   mask-image: url(#rounded-mask);
}