ellipse()
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
的关键字值可用于根据浮动元素参考框的大小快速创建椭圆。
规范
规范 |
---|
CSS 形状模块级别 1 # funcdef-basic-shape-ellipse |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
- 使用此数据类型的属性:
clip-path
,shape-outside
- 基本形状指南