Perekaan kursus disarankan:

Fungsi circle() CSS

Definisi dan penggunaan CSS circle() Fungsi digunakan untuk mendefinikan bulatan yang mempunyai jari-jari dan lokasi.

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

Contoh

Contoh 1

Memotong imej kepada bulatan ber radius 50%:

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

Cuba sendiri

Contoh 2

Memotong imej kepada bulatan ber radius 50% dan menempatkan pusat bulatan di sebelah kanan:

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

Cuba sendiri

Contoh 3

gunakan clip-path dan circle() Mencapai kesan animasi:

#myDIV {
  lebar: 100 px;
  tinggi: 100 px;
  latar belakang warna: coral;
  warna: hijau;
  animation: mymove 5s infinite;
  clip-path: circle(50%);
}
@keyframes mymove {
  50% {clip-path: circle(20%);}
}

Cuba sendiri

Contoh 4

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

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

Cuba sendiri

Rumus CSS

circle(radius di posisi)
Nilai Penerangan
radius

Diperlukan. Tentukan jari-jari bulatan. Boleh jadi salah satu daripada nilai berikut:

  • Nilai panjang
  • Peratusan
  • closest-side: gunakan jarak dari pusat bentuk ke sisi terdekat kotak referensi
  • farthest-side: gunakan jarak dari pusat bentuk ke sisi terjauh kotak referensi
di posisi

Pilihan. Tentukan lokasi pusat bulatan.

Boleh jadi nilai panjang, beratus persen, atau nilai seperti kiri, kanan, atas atau bawah.

Nilai lalai adalah tengah.

Butir teknikal

Versi: Modul Bentuk CSS Level 1

Dukungan pereka

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

Chrome Edge Firefox Safari Opera
37 79 54 10.1 24

Laman yang berkenaan

Rujukan：属性 clip-path CSS

Rujukan：Sifat shape-outside CSS

Rujukan：Fungsi ellipse() CSS

Rujukan：Fungsi inset() CSS

Rujukan：Fungsi polygon() CSS