CSS circle() 函数

定义和用法

CSS 的 circle() 函数用于定义一个具有半径和位置的圆形。

circle() 函数通常与 clip-path 属性和 shape-outside 属性一起使用。

实例

例子 1

将图像裁剪为半径为 50% 的圆形：

img {
  clip-path: circle(50%);
}

亲自试一试

例子 2

将图像裁剪为半径为 50% 的圆形，并将圆心定位到右侧：

img {
  clip-path: circle(50% at right);
}

亲自试一试

例子 3

使用 clip-path 和 circle() 实现动画效果：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}

@keyframes mymove {
  50% {clip-path: circle(20%);}
}

亲自试一试

例子 4

结合使用 circle()、clip-path 和 shape-outside：

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

亲自试一试

CSS 语法

circle(radius at position)
值 描述
radius

必需。指定圆的半径。可以是以下值之一：

  • 长度值
  • 百分比
  • closest-side：使用从形状中心到参考框最近边的距离
  • farthest-side：使用从形状中心到参考框最远边的距离
at position

可选。指定圆的中心位置。

可以是长度值、百分比值，也可以是 left、right、top 或 bottom 等值。

默认值为 center。

技术细节

版本： CSS Shape Module Level 1

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

相关页面

参考：CSS clip-path 属性

参考：CSS shape-outside 属性

参考：CSS ellipse() 函数

参考：CSS inset() 函数

参考：CSS polygon() 函数