Bagaimana menggunakan fungsi CSS Conic-Gradient ()?

Conic-Gradient () mencipta peralihan warna kerucut berputar di sekitar titik tengah, sesuai untuk carta pai, roda warna atau reka bentuk bulat hiasan yang dilaksanakan dalam CSS tulen; 1. 2. Sintaks asas adalah latar belakang: conic-gradient (color1, color2, ...); 3. Sudut permulaan boleh ditetapkan dari (), seperti dari 45deg; 4. Menggunakan skala warna peratusan untuk mengawal setiap julat warna segmen, seperti merah 0 70% bermakna akaun merah untuk lilitan 70%; 5. Buat jurang antara segmen dengan memasukkan segmen warna telus atau latar belakang (seperti 1%); 6. Menggabungkan saiz latar belakang dan kedudukan latar belakang ia dapat mensimulasikan kesan graf cincin; 7. Ia disokong oleh pelayar moden, tetapi bukan oleh IE. Ia dapat mengesan ciri -ciri melalui @supports dan menyediakan gaya alternatif; Kaedah ini dapat merealisasikan visualisasi data mudah tanpa imej atau javascript, yang lengkap dan cekap.

Fungsi conic-gradient() dalam CSS digunakan untuk membuat kecerunan yang berputar di sekitar titik tengah, dengan warna beralih dalam corak pekeliling, seperti kon. Ia amat berguna untuk membuat carta pai, roda warna, atau reka bentuk radial hiasan secara langsung dalam CSS -tiada imej atau JavaScript yang diperlukan.

Inilah cara menggunakannya dengan berkesan.

Apa yang dilakukan conic-gradient()

Tidak seperti linear-gradient() (yang pergi ke sisi) atau radial-gradient() (yang menyebar ke luar dari pusat), conic-gradient() meletakkan warna di sekitar bulatan, bermula dari atas dan bergerak mengikut arah jam.

Sintaks asas:

 Latar Belakang: Conic-Gradient (Color1, Color2, ...);

Contoh:

 div {
  Lebar: 200px;
  Ketinggian: 200px;
  Latar Belakang: Conic-Gradient (merah, kuning, kapur, biru);
  Radius sempadan: 50%;
}

Ini mewujudkan kecerunan bulat yang kelihatan seperti roda warna dihiris ke dalam empat bahagian.

Kawal sudut permulaan dan putaran

Secara lalai, kecerunan bermula di bahagian atas (0DEG). Anda boleh menukar ini menggunakan sintaks from() .

 Latar Belakang: Conic-Gradient (dari 45deg, merah, biru, hijau);

Ini berputar seluruh kecerunan supaya ia bermula pada 45 darjah (kanan atas).

Anda juga boleh menentukan berapa banyak warna yang diambil dengan menentukan warna berhenti:

 Latar Belakang: Conic-Gradient (dari 90deg, merah 0 25%, kuning 25%50%, kapur 50%75%, biru 75%100%);

Ini mewujudkan empat keping 90 darjah yang sama, bermula dari sebelah kanan.

? Fikirkan setiap warna sebagai menduduki "baji" - peratusan mentakrifkan berapa banyak bulatan yang diliputi.

Buat carta pai dengan gradien conic

Anda boleh mensimulasikan carta pai dengan memberikan hentian warna ketepatan.

Contoh: carta pai dengan 70% merah, 20% kuning, 10% hijau:

 .pie {
  Lebar: 200px;
  Ketinggian: 200px;
  Radius sempadan: 50%;
  Latar Belakang: Conic-Gradient (
    merah 0 70%,
    kuning 70% 90%,
    hijau 90% 100%
  );
}

Tiada HTML atau JS tambahan - hanya CSS tulen. Hebat untuk visualisasi data mudah.

Tambahkan jurang atau sempadan antara segmen

Untuk menambah ruang di antara kepingan (seperti carta donat dengan jurang), gunakan pelbagai latar belakang atau bayang -bayang lapisan, tetapi helah yang lebih mudah ialah memasukkan segmen yang berbeza nipis:

 Latar Belakang: Conic-Gradient (
  merah 0 69%,
  telus 69% 70%,
  kuning 70% 89%,
  telus 89% 90%,
  hijau 90% 99%,
  telus 99% 100%
);

Ini mewujudkan 1% jurang telus antara setiap warna - menggunakan warna putih atau latar belakang dan bukannya telus jika anda mahu sempadan yang kelihatan.

Gabungkan dengan background-size dan border-radius

Untuk menjadikan kecerunan muncul sebagai cincin (gaya donat), anda boleh meletakkannya di latar belakang yang lain:

 .donut {
  Lebar: 200px;
  Ketinggian: 200px;
  Radius sempadan: 50%;
  Latar Belakang: 
    Conic-Gradient (merah 0 30%, kuning 30%70%, kapur 70%100%),
    putih; / * Warna pusat */
  Latar Belakang: 80% 80%; / * Mengecut kecerunan untuk membuat lubang */
  Latar Belakang: Pusat;
  Latar Belakang berulang: tidak berulang;
}

Sebagai alternatif, gunakan pseudo-elemen atau trik padding untuk kesan cincin yang benar.

Sokongan dan sandaran penyemak imbas

conic-gradient() disokong dalam semua pelayar moden (Chrome, Firefox, Safari, Edge), tetapi tidak di Internet Explorer .

Sekiranya anda memerlukan sandaran:

 .fallback {
  Latar Belakang: Merah; / * Warna Fallback */
  Latar Belakang: Conic-Gradient (merah, biru);
}

Atau gunakan @supports untuk pengesanan ciri:

 @Supports (latar belakang: conic-gradient (merah, biru)) {
  .chart {latar belakang: conic-gradient (merah, biru); }
}

Pada asasnya, conic-gradient() berkuasa untuk reka bentuk bulat apabila anda memerlukan perkahwinan warna. Gunakannya dengan border-radius: 50% untuk bulatan, mengendalikan kepingan dengan peratusan berhenti, dan tweak sudut permulaan yang diperlukan. Ia bukan untuk semua orang, tetapi apabila anda memerlukan kepingan pai cepat atau roda warna, ia menghairankan mampu.

Atas ialah kandungan terperinci Bagaimana menggunakan fungsi CSS Conic-Gradient ()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!