剪辑（圆圈）

CSS：

div{
  width: 200px;
  height: 200px;
  background: teal;
  clip-path: circle(30% at 50% 50%); /* refer remarks before usage */
}

HTML

<div></div>

此示例显示如何将 div 剪辑为圆形。元素被剪切成一个圆，其半径为 30％，基于参考框的尺寸，其中心点位于参考框的中心。这里由于没有提供<clip-geometry-box>（换句话说，参考框），元素的 border-box 将用作参考框。

圆形需要有一个半径和一个带有 (x,y) 坐标的中心：

circle(radius at x y)

查看示例

输出：