circle()

**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%)，它在浮动元素上定义一个圆形，供文本环绕。

规范

规范
CSS Shapes 模块级别 1
# funcdef-basic-shape-circle

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅