Fungsi CSS repeating-conic-gradient()
- Halaman sebelumnya Fungsi repeat() CSS
- Halaman berikutnya Fungsi repeating-linear-gradient() CSS
- Kembali ke tingkat yang di atas Panduan Fungsi CSS
Definisi dan penggunaan
CSS repeating-conic-gradient()
Fungsi digunakan untuk mengulangi gradient segi empat.
Contoh:
gradient segi empat | pengulangan gradient segi empat |
---|---|
conic-gradient(merah, kuning)} | repeating-conic-gradient(merah 10%, kuning 20%); |
Contoh
Contoh 1
Pengecahkan konik yang diulang:
#grad { background-image: repeating-conic-gradient(merah 10%, kuning 20%); }
Contoh 2
Pengecahkan konik yang diulang yang menentukan titik mula dan titik akhir warna:
#grad { background-image: repeating-conic-gradient(merah 0 30deg, kuning 30deg 60deg, biru 60deg 90deg); }
Contoh 3
Satu lagi pengecahkan konik yang diatur dengan sudut mula dan posisi pusat yang diulang:
#grad1 { background-image: repeating-conic-gradient(dari 10deg at 30% 30%, merah 0 30deg, kuning 30deg 60deg, biru 60deg 90deg); }
Sintaks CSS
repeating-conic-gradient([dari sudut]] [at kedudukan,] degree warna, degree warna, ... );
Nilai | Penerangan |
---|---|
dari sudut |
Pilihan. Keseluruhan pengecahkan konik berputar mengikut sudut ini. Nilai lalai adalah 0deg. |
at kedudukan |
Pilihan. Tentukan titik pusat pengecahkan konik. Nilai lalai adalah center. |
degree warna, ... , degree warna |
Titik penghujung warna adalah warna yang anda kehendaki untuk dipaparkan dengan transisi yang lancar diantara warna. Nilai ini terdiri daripada nilai warna dan satu atau dua pilihan tempat berhenti (sudut 0 hingga 360 darjah atau 0% hingga 100%) |
Perincian teknikal
Versi: | Modul Imej CSS Level 4 |
---|
Pendukung pereka
Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong fungsi ini.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
69 | 79 | 83 | 12.1 | 56 |
Halaman yang berkaitan
Panduan:Gradasi CSS
Rujukan:Atribut background-image CSS
Rujukan:Fungsi conic-gradient() CSS
Rujukan:Fungsi linear-gradient() CSS
Rujukan:Fungsi radial-gradient() CSS
- Halaman sebelumnya Fungsi repeat() CSS
- Halaman berikutnya Fungsi repeating-linear-gradient() CSS
- Kembali ke tingkat yang di atas Panduan Fungsi CSS