CSS ellipse() 函数

定义和用法

CSS 的 ellipse() 函数定义了一个具有两个半径 x 和 y 的椭圆。

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

实例

例子 1

将图像裁剪为 x 半径为 50%、y 半径为 30% 的椭圆：

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

亲自试一试

例子 2

将图像裁剪为 x 半径为 50%、y 半径为 30% 的椭圆，并将椭圆的中心定位到右侧：

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

亲自试一试

例子 3

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

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

@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

亲自试一试

例子 4

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

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

亲自试一试

CSS 语法

ellipse(xy-radius at position)

技术细节

浏览器支持

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

相关页面

参考：CSS clip-path 属性

参考：CSS shape-outside 属性

参考：CSS circle() 函数

参考：CSS inset() 函数

参考：CSS polygon() 函数