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>

列印頁面