Fungsi ellipse() CSS

Definisi dan penggunaan

CSS ellipse() Fungsi ini mendefinisikan ellips yang memiliki dua jari-jari x dan y.

ellipse() Fungsi biasanya digunakan bersama dengan clip-path Properti dan shape-outside Guna properti bersama-sama.

Contoh

Contoh 1

Memotong imej menjadi ellips dengan jari-jari x 50% dan jari-jari y 30%:

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

Coba sendiri

Contoh 2

Memotong imej menjadi ellips dengan jari-jari x 50% dan jari-jari y 30%, dan menempatkan pusat ellips di sebelah kanan:

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

Coba sendiri

Contoh 3

Gunakan clip-path dan ellipse() Mencapai efek animasi:

#myDIV {
  lebar: 100px;
  tinggi: 100px;
  warna latar belakang: korral;
  warna: hijau;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

Coba sendiri

Contoh 4

dipakai bersama-sama ellipse()、clip-path dan shape-outside:

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

Coba sendiri

Sintaks CSS

ellipse(xy-radius di posisi)

Detil teknikal

Dukungan pereka

Angka di dalam tabel menunjukkan versi paling awal browser yang mendukung fungsi ini.

Laman berkenaan

Rujukan:Sifat clip-path CSS

Rujukan:Sifat shape-outside CSS

Rujukan:Fungsi circle() CSS

Rujukan:Fungsi inset() CSS

Rujukan:Fungsi polygon() CSS