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> データ型の一つです。
試してみましょう
clip-path: circle(50px);
clip-path: circle(6rem at right center);
clip-path: circle(10% at 2rem 90%);
clip-path: circle(closest-side at 5rem 6rem);
clip-path: circle(farthest-side);
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element"></div>
</section>
#default-example {
background: #fe9;
}
#example-element {
background: linear-gradient(to bottom right, #f52, #05f);
width: 100%;
height: 100%;
}
構文
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 |
ブラウザーの互換性
関連情報
- このデータ型を使用するプロパティ:
clip-path,shape-outside - 基本シェイプのガイド