Rekomendasi pelajaran:

Fungsi circle() CSS

Definisi dan penggunaan CSS circle() Fungsi digunakan untuk mendefinisikan lingkaran yang memiliki radius dan posisi.

circle() Fungsi biasanya digunakan bersamaan dengan clip-path Atribut dan shape-outside Atur atribut bersamaan.

Contoh

Contoh 1

Memotong gambar menjadi lingkaran dengan radius 50%:

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

Coba sendiri

Contoh 2

Memotong gambar menjadi lingkaran dengan radius 50% dan menempatkan pusat ke kanan:

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

Coba sendiri

Contoh 3

gunakan clip-path dan circle() Menciptakan efek animasi:

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

Coba sendiri

Contoh 4

dapat digunakan bersamaan circle()、clip-path dan shape-outside:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Coba sendiri

Sintaks CSS

circle(radius di posisi)

Detil teknis

Dukungan browser

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

Halaman yang berhubungan

Referensi：Atribut clip-path CSS

Referensi：Properti shape-outside CSS

Referensi：Fungsi ellipse() CSS

Referensi：Fungsi inset() CSS

Referensi：Fungsi polygon() CSS