circle()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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-
使用从形状中心到参照盒子的最远边缘的长度。对于圆形来说，这是任何维度中最远的边缘。
<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%)，用于在浮动元素周围使文本环绕成圆形。
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%);
}
规范
| Specification |
|---|
| CSS Shapes Module Level 1 # funcdef-basic-shape-circle |
浏览器兼容性
Loading…
参见
- 使用该数据类型的属性：
clip-path、shape-outside - 基本形状指南