椭圆可以被认为是扭曲的圆，CSS ellipse() 函数的工作方式与 circle() 函数类似.
但是，对于 ellipse()，必须指定水平 (x) 和垂直 (y) 半径。
可能的值
<shape-radius> - 此序列中需要两个半径 x 和 y。这些值可以指定为 <length>、<percentage>，或使用最近端和最远端等关键字。
closest-side - 使用中心之间的距离形状和参考框最近的一侧。对于椭圆形，这是指沿半径尺寸最近的边。
farthest-side - 使用从形状中心到形状最外侧的距离。参考框。在椭圆的上下文中，这是指最远的一侧。
<position> - 移动椭圆的中心。可以是 <length>、<percentage> 或关键字（例如 left 和 right）。如果未指定任何内容，则默认将 <position> 设置为中心点。
语法
ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
<shape-radius> = <length> | <percentage> | closest-side | farthest-side CSS ellipse(): 基本示例
以下示例演示了具有 shape-outside 属性的 ellipse() 的工作原理。
<html>
<head>
<style>
.ellipse-container {
float: left;
width: 280px;
height: 250px;
shape-outside: ellipse(45% 40%);
background: lightblue;
}
</style>
</head>
<body>
<div class="ellipse-container"></div>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
</body>
</html> CSS ellipse() - 定位椭圆
在以下示例中，椭圆() CSS函数用于使用clip-path和shape-outside属性创建椭圆。
<html>
<head>
<style>
.ellipse-demo {
width: 300px;
height: 200px;
text-align: center;
font-size:15px;
background-color: lightgray;
clip-path: ellipse(50% 50% at 50% 50%);
shape-outside: ellipse(100% 60% at left);
float: left;
margin-right: 20px;
}
.content {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Elliptical Text Wrapping Example</h1>
<div class="ellipse-demo"></div>
<div class="content">
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
<p>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.</p>
</div>
</body>
</html>