CSS ellipse() 函數

定義和用法

CSS 的 ellipse() 函數定義了一個具有兩個半徑 x 和 y 的橢圓。

ellipse() 函數通常與 clip-path 屬性和 shape-outside 屬性一起使用。

實例

例子 1

將圖像裁剪為 x 半徑為 50%、y 半徑為 30% 的橢圓：

img {
  clip-path: ellipse(50% 30%);
}

親自試一試

例子 2

將圖像裁剪為 x 半徑為 50%、y 半徑為 30% 的橢圓，并將橢圓的中心定位到右側：

img {
  clip-path: ellipse(50% 30% at right);
}

親自試一試

例子 3

使用 clip-path 和 ellipse() 實現動畫效果：

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

親自試一試

例子 4

結合使用 ellipse()、clip-path 和 shape-outside：

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

親自試一試

CSS 語法

ellipse(xy-radius at position)

技術細節

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

相關頁面

參考：CSS clip-path 屬性

參考：CSS shape-outside 屬性

參考：CSS circle() 函數

參考：CSS inset() 函數

參考：CSS polygon() 函數