Fungsi CSS repeating-conic-gradient()

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

Cuba sendiri

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

Cuba sendiri

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

Cuba sendiri

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

Rujukan:Fungsi repeating-linear-gradient() CSS

Rujukan:Fungsi repeating-radial-gradient() CSS