Rekomendasi kursus:

Fungsi ellipse() CSS

Definisi dan penggunaan CSS ellipse() Fungsi mendefinisikan elips dengan dua jari-jari x dan y.

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

Contoh

Contoh 1

Memotong gambar menjadi elips dengan jari-jari x 50% dan jari-jari y 30%:

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

Coba sendiri

Contoh 2

Memotong gambar menjadi elips dengan jari-jari x 50% dan jari-jari y 30%, dan menempatkan pusat elips di sisi kanan:

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

Coba sendiri

Contoh 3

gunakan clip-path dan ellipse() Mengimplementasikan efek animasi:

#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%);}
}

Coba sendiri

Contoh 4

digunakan bersama-sama ellipse(),clip-path dan shape-outside:

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

Coba sendiri

Syarat CSS

ellipse(xy-radius di posisi)

Detil teknis

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang mendukung fungsi ini penuh.

Halaman yang berhubungan

Referensi：Properti clip-path CSS

Referensi：Atribut shape-outside CSS

Referensi：Fungsi circle() CSS

Referensi：Fungsi inset() CSS

Referensi：Fungsi polygon() CSS