Fungsi conic-gradient() CSS

Definisi dan penggunaan

CSS conic-gradient() Fungsi menetapkan konik gradient untuk citra latar belakang.

Konik gradient adalah transisi warna yang berputar di sekitar titik pusat (seperti pita dan roda warna).

Untuk membuat konik gradient, harus mengdefinikan setidaknya dua titik berhenti warna.

Contoh konik gradient:;

Contoh

Contoh 1

Ada tiga warna konik gradient:;

#grad {
  background-image: conic-gradient(merah, kuning, hijau);
}

Cuba sendiri

Contoh 2

Ada lima warna konik gradient:;

#grad {
  background-image: conic-gradient(merah, kuning, hijau, biru, hitam);
}

Cuba sendiri

Contoh 3

Ada tiga warna dan untuk setiap warna yang ditentukan sudut:;

#grad {
  background-image: conic-gradient(merah 45derajat, kuning 90derajat, hijau 210derajat);
}

Cuba sendiri

Contoh 4

Dengan menambah border-radius: 50% jadi konik gradient kelihatan seperti pita:;

#grad {
  background-image: conic-gradient(merah, kuning, hijau, biru, hitam);
  border-radius: 50%;
}

Cuba sendiri

Contoh 5

Gradient konik yang ada sudut permulaan:

#grad {
  background-image: conic-gradient(dari 90deg, red, yellow, green);
  border-radius: 50%;
}

Cuba sendiri

Contoh 6

Gradient konik yang ada lokasi pusat:

#grad {
  background-image: conic-gradient(di 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Cuba sendiri

Contoh 7

Gradient konik yang sama ada sudut permulaan dan lokasi pusat:

#grad {
  background-image: conic-gradient(dari 90deg di 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Cuba sendiri

Contoh 8

Contoh pita lain:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Cuba sendiri

Sintaks CSS

background-image: conic-gradient([dari sudut]] [di kedudukan,] degree warna, degree warna, ... );

Butir teknologi

Pendukung pereka

Nombor dalam tabel menunjukkan versi pereka paling awal yang menyokong fungsi ini.

Halaman berkaitan

Tutori:Gred Gradient CSS

Rujukan：Atribut background-image CSS

Rujukan：Fungsi linear-gradient() CSS

Rujukan：Fungsi radial-gradient() CSS

Rujukan：Fungsi repeating-conic-gradient() CSS

Rujukan：Fungsi repeating-linear-gradient() CSS

Rujukan：Fungsi repeating-radial-gradient() CSS