Berapakah jenis kecerunan css3 yang ada?
Terdapat dua jenis kecerunan css3: 1. Kecerunan linear yang dicipta oleh fungsi kecerunan-linear(), yang menukar warna di sepanjang paksi dan melakukan kecerunan berjujukan dari titik permulaan hingga warna akhir; 2. Fungsi jejari-kecerunan() Cipta kecerunan jejarian yang menjadikan kecerunan bulat dari titik mula ke warna titik akhir dari dalam ke luar.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Dua kaedah kecerunan:
Kecerunan Linear: Tukar warna di sepanjang paksi, dari titik permulaan ke warna akhir Kecerunan berjujukan.
background:linear-gradient(direction,color-stop1,color-stop2,……);
Kecerunan Jejari (Kecerunan Jejari): Dari titik permulaan ke titik akhir, warna melakukan kecerunan bulat dari dalam ke luar.
background:radial-gradient(center,shape size,start-color,……,last-color);
Kod sampel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grad1
{
width: 200px;
height: 200px;
/*background-image: linear-gradient( #b7ffb5, #a880ff);*/
/*background-image: linear-gradient(to right, #b7ffb5, #a880ff);*/
/*background-image: linear-gradient(to bottom right, #b7ffb5, #a880ff);*/
background-image: radial-gradient(#7af0ff, #892aff);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Rendering:
1. Kecerunan linear atas dan bawah
2. Kecerunan linear kiri dan kanan
3. Kecerunan linear pepenjuru
4. . Kecerunan Laluan
(Mempelajari perkongsian video: tutorial video css, bahagian hadapan web)
Atas ialah kandungan terperinci Berapakah jenis kecerunan css3 yang ada?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1385
52
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".
Contoh terperinci tentang cara menyelesaikan masalah pengalianan kecerunan CSS!
Nov 25, 2022 pm 04:43 PM
Artikel ini akan memperkenalkan kepada anda bagaimana untuk menyelesaikan masalah pengalian yang disebabkan oleh menggunakan grafik kecerunan yang dipanggil teknik pengilangan kecerunan CSS boleh dilakukan sebaik sahaja anda mengetahuinya. Mari kita lihat bagaimana untuk mencapainya berguna kepada semua orang!
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".
Bagaimana untuk mencapai kesan kecerunan ketelusan menggunakan sifat CSS
Nov 18, 2023 pm 05:28 PM
Kaedah melaksanakan kesan kecerunan ketelusan menggunakan sifat CSS memerlukan contoh kod khusus Dalam reka bentuk web, kesan kecerunan ketelusan boleh menambah kesan peralihan yang lembut dan cantik pada halaman. Melalui penetapan sifat CSS, kita boleh mencapai kesan peralihan dengan mudah pada ketelusan elemen yang berbeza. Hari ini kami akan memperkenalkan beberapa kaedah biasa dan contoh kod khusus. Gunakan atribut kelegapan Atribut Kelegapan boleh menetapkan ketelusan elemen Nilai berjulat dari 0 hingga 1. 0 bermaksud telus sepenuhnya dan 1 bermaksud legap sepenuhnya. kita boleh lulus
