circle()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
circle() は CSS の関数で、<basic-shape> データ型の一つです。
試してみましょう
構文
css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);
値
<shape-radius>-
<length>、<percentage>、またはclosest-sideおよびfarthest-sideの値の何れかです。closest-side-
シェイプの中心から参照ボックスの最も近い辺までの長さを使用します。円の場合は、あらゆる軸で最も近い辺となります。
farthest-side-
シェイプの中心から参照ボックスの最も遠い辺までの長さを使用します。円の場合は、あらゆる軸で最も遠い辺となります。
<position>-
円の中心を移動します。
<length>、<percentage>、またはleftのような値の何れかです。<position>の値は省略された場合、既定値は center になります。
例
基本的な円
下の例では、shape-outside プロパティの値が circle(50%) となっており、浮動要素に円を定義して、テキストが回り込むようになっています。
仕様書
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-circle |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このデータ型を使用するプロパティ:
clip-path,shape-outside - 基本シェイプのガイド