circle()

基线广泛可用

自 2020年1月起，此特性已在主流浏览器中得到支持，可在大多数设备和浏览器版本中正常使用。

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

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

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

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

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

<position> =
<position-one> |
<position-two> |
<position-four>

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

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

<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>

<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}

<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
此语法反映了基于 CSS Images Module Level 3, CSS Shapes Module Level 1, CSS Values and Units Module Level 4, CSS Values and Units Module Level 5 的最新标准。并非所有浏览器都已实现全部内容。有关支持信息，请参阅浏览器兼容性。

示例

基本圆形

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

html
<div class="box">
  <img
    alt="一个热气球"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    据说，1782 年 11
    月的一个夜晚，在法国小城安诺内，有两兄弟坐在冬日的炉火旁，看着炉膛里灰色的烟圈沿着宽大的烟囱袅袅升起。他们的名字叫斯蒂芬·蒙哥菲尔和约瑟夫·蒙哥菲尔，职业是造纸工人，以心思缜密著称，对所有科学知识和新发现都有着浓厚的兴趣。在那个夜晚——一个值得纪念的夜晚——之前，数以亿计的人都在注视着自家炉火升起的烟圈，却没有从中得到任何特别的启发。
  </p>
</div>

css
body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

使用该数据类型的属性：clip-path、shape-outside
基本形状指南

帮助改进 MDN

此页面对您有帮助吗？

是否

了解如何参与贡献

此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的问题

circle()

本文内容

尝试一下

语法

值

形式语法

示例

基本圆形

规范

浏览器兼容性

参见

帮助改进 MDN