CSS | 椭圆() 函数

概述

CSS的椭圆()函数用于定义一个椭圆形的形状，可以将其作为一个元素的背景形状或者裁剪元素的形状。

语法

椭圆( [<semiAxisX> | <semiAxisY>], [<semiAxisY> | <semiAxisX>]);

• <semiAxisX>: 可选参数，表示椭圆的X轴半轴长度，默认值为50%。
• <semiAxisY>: 可选参数，表示椭圆的Y轴半轴长度，默认值为50%。

示例

作为背景形状

.element {
  width: 200px;
  height: 100px;
  background: radial-gradient(ellipse at center, #ff0000 0%, #0000ff 100%);
}

这个示例中，我们使用了 radial-gradient 函数来创建一个从红色到蓝色的径向渐变背景，同时通过 ellipse at center 来定义背景的形状为一个居中的椭圆形。

作为裁剪元素的形状

.element {
  width: 200px;
  height: 200px;
  clip-path: ellipse(50% 50% at 50% 50%);
  background: #ff0000;
}

这个示例中，我们使用了 clip-path 属性和 ellipse() 函数来将元素剪切为一个椭圆形，并通过 at 50% 50% 来指定椭圆形所在的位置为元素的中心。

浏览器兼容性

椭圆() 函数的浏览器兼容性较好，适用于大部分现代浏览器，包括 Chrome、Firefox、Safari、Edge等。

对于不支持椭圆() 函数的浏览器，可以使用其他方式来实现相似的效果，例如使用图片或者其他形状的 CSS 属性。

注意：椭圆() 函数的参数只能接受长度值，不能直接接受百分比值。但是可以使用百分比作为元素的宽度或高度来间接定义椭圆的半轴长度。

参考链接

• MDN web docs: 椭圆() 函数