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>
值,则默认为中心。
形式语法
<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 |
浏览器兼容性
BCD tables only load in the browser
参见
- 使用该数据类型的属性:
clip-path
、shape-outside
- 基本形状指南