CSS circle() 函數

定義和用法

CSS 的 circle() 函數用于定義一個具有半徑和位置的圓形。

circle() 函數通常與 clip-path 屬性和 shape-outside 屬性一起使用。

實例

例子 1

將圖像裁剪為半徑為 50% 的圓形：

img {
  clip-path: circle(50%);
}

親自試一試

例子 2

將圖像裁剪為半徑為 50% 的圓形，并將圓心定位到右側：

img {
  clip-path: circle(50% at right);
}

親自試一試

例子 3

使用 clip-path 和 circle() 實現動畫效果：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

親自試一試

例子 4

結合使用 circle()、clip-path 和 shape-outside：

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

親自試一試

CSS 語法

circle(radius at position)
值 描述
radius

必需。指定圓的半徑。可以是以下值之一：

  • 長度值
  • 百分比
  • closest-side：使用從形狀中心到參考框最近邊的距離
  • farthest-side：使用從形狀中心到參考框最遠邊的距離
at position

可選。指定圓的中心位置。

可以是長度值、百分比值，也可以是 left、right、top 或 bottom 等值。

默認值為 center。

技術細節

版本： CSS Shape Module Level 1

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

相關頁面

參考：CSS clip-path 屬性

參考：CSS shape-outside 屬性

參考：CSS ellipse() 函數

參考：CSS inset() 函數

參考：CSS polygon() 函數