Fungsi konik-graden() CSS

Definisi dan penggunaan

CSS konik-graden() Fungsi menetapkan konik-graden sebagai gambar latar belakang.

Konik-graden adalah penyebaran warna transisi yang mengelilingi titik pusat berputar (seperti grafik piring dan roda warna).

Untuk membuat konik-graden, harus mendefinisikan setidaknya dua titik hentian warna.

Contoh konik-graden:

Contoh

Contoh 1

Ada tiga warna konik-graden:

#grad {
  background-image: konik-graden (merah, kuning, hijau);
}

Coba sendiri

Contoh 2

Ada lima warna konik-graden:

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

Coba sendiri

Contoh 3

Ada tiga warna dan menentukan sudut untuk setiap warna konik-graden:

#grad {
  background-image: konik-graden (merah 45derajat, kuning 90derajat, hijau 210derajat)
}

Coba sendiri

Contoh 4

Dengan menambahkan border-radius: 50% sehingga konik-graden terlihat seperti grafik piring:

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

Coba sendiri

Contoh 5

Konus gradient dengan sudut awal:

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

Coba sendiri

Contoh 6

Konus gradient dengan lokasi pusat:

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

Coba sendiri

Contoh 7

Konus gradient dengan sudut awal dan lokasi pusat:

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

Coba sendiri

Contoh 8

Contoh pita grafik lain:

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

Coba sendiri

Syntaks CSS

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

Detil teknis

Dukungan browser

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

Halaman yang berhubungan

Tutoriel:Gradient CSS

Referensi：Properti background-image CSS

Referensi：Fungsi linear-gradient() CSS

Referensi：Fungsi radial-gradient() CSS

Referensi：Fungsi repeating-conic-gradient() CSS

Referensi：Fungsi repeating-linear-gradient() CSS

Referensi：Fungsi repeating-radial-gradient() CSS