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-sidefarthest-side 关键字值。

closest-side

使用从形状中心到参照盒子的最近边缘的长度。对于圆形来说,这是任何维度中最近的边缘。

farthest-side

使用从形状中心到参照盒子的最远边缘的长度。对于圆形来说,这是任何维度中最远的边缘。

<position>

移动圆的中心。可以是一个 <length> 值,或者是一个 <percentage> 值,或者是类似 left 的值。如果省略了 <position> 值,则默认为中心。

形式语法

<circle()> = 
circle( <radial-size>? [ at <position> ]? )

<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}

<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]

<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side

<length-percentage> =
<length> |
<percentage>

示例

基本圆形

在下面的示例中,shape-outside 属性的值为 circle(50%),用于在浮动元素周围使文本环绕成圆形。

规范

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-circle

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
circle()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见