剪輯（圓圈）

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)

檢視示例

輸出：