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 位置)

技術詳細

ブラウザのサポート

テーブルの数字は、この関数を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

参考：CSS clip-path 属性

参考：CSS shape-outside 属性

参考：CSS ellipse() 関数

参考：CSS inset() 函数

参考：CSS polygon() 函数