CSS 函数 - ellipse()

椭圆可以被认为是扭曲的圆形，CSS 的ellipse()函数的工作原理类似于circle()函数。

但是，在ellipse()的情况下，必须指定水平 (x) 和垂直 (y) 半径。

可能的值

<shape-radius> - 此序列需要两个半径 x 和 y。这些值可以指定为<length>、<percentage>或使用关键字，如closest-side和farthest-side。

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() - 基本示例

以下示例演示了ellipse()与shape-outside属性结合使用的情况。

<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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Nullam viverra suscipit massa, sit amet lobortis quam sollicitudin sed. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur.</p>
</body>
</html>

CSS ellipse() - 定位椭圆

在以下示例中，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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at lectus augue. Sed vel semper libero. Integernec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
      <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
   </div>
</body>
</html>

打印页面