Bayang jatuh ialah kesan yang menjatuhkan atau menambah bayang di belakang elemen HTML yang dipilih apabila dipaparkan pada halaman web. Kesan ini boleh dicapai menggunakan ' bayang-bayang() ' kaedah sebagai nilai untuk CSS ' penapis ” harta atau menggunakan “ bayangan kotak ” harta benda. Dengan menggunakan sifat 'bayang-kotak', peningkatan visual, pengalaman pengguna, penekanan dan tumpuan boleh ditarik ke elemen HTML sasaran khusus.
Panduan ini menunjukkan prosedur membuat kesan bayang-bayang jatuh menggunakan sifat bayang-kotak:
-
- Buat Bayang Jatuh Pepejal Menggunakan Hartanah box-shadow
- Buat Bayang Jatuh Kabur Menggunakan Hartanah box-shadow
- Kembangkan Kawasan Drop Shadow
Bagaimana untuk Membuat Drop Shadows dalam CSS3 Menggunakan Harta Box-shadow?
' bayangan kotak ” harta membenarkan pembangun untuk mewujudkan hierarki visual dengan menunjukkan kedudukan relatif elemen pada halaman. Dengan menggunakannya, pencipta halaman web boleh mencipta ilusi objek yang mengeluarkan bayang-bayang pada permukaan, memberikan unsur rasa yang lebih interaktif.
Sintaks
Sifat 'box-shadow' mempunyai sintaks:
bayang kotak: [ mengimbangi mendatar ] [ mengimbangi menegak ] [ jejari kabur ] [ jejari sebaran ] [ warna ] ;
Penjelasan tentang istilah yang digunakan dalam sintaks di atas:
-
- Pada mulanya, ' mengimbangi mendatar ” mendapatkan semula/menyimpan kedudukan paksi-X, dan “ negatif nilai ” menetapkan bayang ke kiri dan sebaliknya.
- ' mengimbangi menegak nilai ' menyimpan kedudukan paksi Y, ' positif nilai ” menetapkan bayang ke arah bawah, dan sebaliknya dalam kes “ negatif ” nilai.
- Seterusnya, ' jejari kabur ” nilai daripada nama menetapkan kekaburan bayang-bayang.
- ' jejari sebaran nilai ” menentukan berapa banyak jejari bayang-bayang harus berkembang.
- ' warna ” menetapkan warna bayang-bayang, ia boleh dalam “ HSL ” atau “ RGB ” format juga.
Sekarang, mari kita lihat beberapa contoh untuk pemahaman yang lebih baik:
Contoh 1: Gunakan Solid Drop Shadow Menggunakan Hartanah box-shadow
Untuk menetapkan bayang titisan pepejal, hanya arah dan warna bayang-bayang dimasukkan sebagai nilai kepada “ bayangan kotak ” harta:
< gaya >.boxShadowContoh {
lebar: 210px;
sempadan: 2px sutera jagung pepejal;
ketinggian: 210px;
warna latar belakang: #f0f0f0;
bayang kotak: 10px 10px hijau hutan;
}
gaya >
Dalam kod di atas:
-
- Pertama, elemen HTML dipilih mempunyai kelas ' boxShadowContoh ”. Dan nilai ' 210px 'disediakan kepada' ketinggian ” dan “ lebar ” hartanah. Juga, gunakan ' sempadan ” dan “ warna latar belakang ” sifat untuk visualisasi yang lebih baik.
- Seterusnya, tetapkan nilai “ 10px 10px hijau hutan ' kepada ' bayangan kotak ” Harta CSS. ' 10px ” ialah ofset mendatar dan menegak yang menentukan lokasi bayang-bayang perlu digunakan. Dan juga ' hutan hijau ” ialah warna bayang-bayang.
Selepas penyusunan, halaman web kelihatan seperti ini:
Output mengesahkan bahawa bayang jatuh jenis pepejal telah diletakkan menggunakan sifat bayang kotak.
Contoh 2: Gunakan Bayang Jatuh Kabur Menggunakan Harta Bayang-kotak
Untuk menjadikan bayang yang telah digunakan menjadi kabur, satu lagi nilai berangka dimasukkan sebelum warna untuk “ bayangan kotak ” harta benda. Lawati kod yang dikemas kini di bawah:
< gaya >.boxShadowContoh {
lebar: 210px;
sempadan: 2px sutera jagung pepejal;
ketinggian: 210px;
warna latar belakang: asap putih;
bayang kotak: 10px 10px 15px hijau hutan;
}
gaya >
Menurut kod di atas, bayang itu kini ' 15px ” kabur. Selepas tamat fasa penyusunan, halaman web kelihatan seperti ini:
Rajah di atas menunjukkan bahawa bayang itu kini kabur.
Contoh 3: Meluaskan Kawasan Drop Shadow
Nilai taburan disediakan kepada “ bayangan kotak ” harta untuk mengembangkan kawasan bayang-bayang. Nilai spread mestilah dalam format berangka. Seperti dalam coretan kod di bawah, kawasan bayang-bayang dikembangkan kepada “ 20px ”:
< gaya >.boxShadowContoh {
lebar: 210px;
sempadan: 2px sutera jagung pepejal;
ketinggian: 210px;
warna latar belakang: asap putih;
bayang kotak: 10px 10px 15px 20px hijau hutan;
}
gaya >
Selepas pelaksanaan, bayang jatuh kini kelihatan seperti ini:
Seperti yang anda boleh lihat kawasan bayang kini meningkat sebanyak 20px.
Kesimpulan
' bayangan kotak 'harta benda digunakan untuk mewujudkan ' bayang-bayang ” kesan pada elemen HTML yang dipilih. ' bayang-bayang 'harta menerima lima nilai,' mengimbangi mendatar ”, “ mengimbangi menegak ”, “ jejari kabur ”, “ jejari sebaran ” dan “ warna ”. Nilai 'offset mendatar' dan 'offset menegak' menetapkan dimensi untuk bayang-bayang dari mana bayang-bayang jatuh sepatutnya muncul. Nilai 'jejari kabur' menjadikan bayang-bayang kabur dan nilai 'jejari sebaran' memanjangkan kawasan bayang-bayang.