ellipse()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

ellipse() CSS 函数是 <basic-shape> 数据类型之一。

尝试一下

语法

css
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

椭圆本质上是一个扁平的圆形，因此 ellipse() 的行为与 circle() 非常相似，只是我们需要指定两个半径 x 和 y。

值

<shape-radius>

两个半径，按顺序是 x 和 y。可以是 <length>、<percentage> 或值 closest-side 和 farthest-side。

closest-side

使用形状中心到参考框最近边缘的长度。对于椭圆来说，这是半径维度中最近的边缘。

farthest-side

使用形状中心到参考框最远边缘的长度。对于椭圆来说，这是半径维度中最远的边缘。

<position>

移动椭圆的中心。可以是 <length>、 <percentage>，或者类似于 left 这样的值。如果省略 <position> 值，则默认为中心。

形式语法

<ellipse()> = 
  ellipse( <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>

示例

基本 ellipse() 示例

这个示例显示了一个 x 半径为 40%，y 半径为 50% 的椭圆，位置在左边。这意味着椭圆的中心位于框的左边缘，使我们的文本围绕其周围形成一个半椭圆形状。你可以更改这些值来查看椭圆如何变化。

使用 closest-side / farthest-side 值

closest-side 和 farthest-side 的关键字值对于基于浮动元素参考框大小创建快速椭圆形状非常有用。

规范

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-ellipse

浏览器兼容性

BCD tables only load in the browser

参见