Rumah > Artikel > hujung hadapan web > Cara menggunakan CSS untuk mencapai kesan bayangan elemen
Cara menggunakan CSS untuk mencapai kesan bayangan elemen
- WBOYasal
- 2023-11-21 18:36:372148semak imbas
Kaedah menggunakan CSS untuk mencapai kesan bayangan elemen memerlukan contoh kod khusus
Dalam reka bentuk web, kesan bayangan boleh menambah rasa tiga dimensi dan lapisan pada elemen halaman, menjadikan halaman lebih kaya dan lebih jelas . CSS (Cascading Style Sheets) menyediakan pelbagai kaedah dan sifat untuk melaksanakan kesan bayang-bayang jatuh.
1. Atribut box-shadow
Atribut box-shadow ialah atribut baharu dalam CSS3 yang digunakan untuk mencapai kesan bayangan elemen. Dengan menambahkan atribut bayang-kotak pada elemen, anda boleh mencapai kesan bayang-bayang pada elemen, menjadikan elemen terapung keluar dari halaman dan meningkatkan kesan tiga dimensi. Sintaks atribut
box-shadow adalah seperti berikut:
box-shadow: h-shadow v-shadow blur spread color inset
Antaranya, maksud khusus setiap parameter adalah seperti berikut:
- h-; bayang-bayang: kedudukan bayang-bayang mendatar, yang boleh menjadi nilai Positif (ke kanan) atau nilai negatif (ke kiri); kabur: jarak kabur, nilai adalah 0 kepada nilai antara infiniti positif, lebih besar nilai, lebih tinggi tahap kabur
- spread: pengembangan saiz bayang-bayang, apabila nilai adalah nilai negatif, bayang-bayang akan mengecut kepada di dalam elemen, apabila nilai adalah nilai positif, bayang-bayang akan berkembang ke Luar elemen
- warna: warna bayang-bayang, anda boleh menggunakan nilai warna, nilai RGB atau nilai heksadesimal
- inset: nilai pilihan, jika ini nilai ditentukan, kesan bayang-bayang akan menjadi bayang-bayang dalam.
- Berikut ialah contoh kod khusus yang melaksanakan kotak teks dengan kesan bayang-bayang:
<!DOCTYPE html> <html> <head> <style> .shadow-box { width: 200px; height: 40px; padding: 10px; border: none; border-radius: 5px; box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5); } </style> </head> <body> <input type="text" class="shadow-box" placeholder="请输入内容"> </body> </html>Dalam kod di atas, dengan menambahkan gaya dengan kotak bayangan kelas pada kotak input, kotak teks dengan kesan bayang-bayang ialah dilaksanakan kotak teks Kesan. Nilai atribut bayang-kotak ditetapkan kepada "2px 2px 5px 2px rgba(0, 0, 0, 0.5)", yang bermaksud kedudukan bayang-bayang mendatar dan menegak adalah 2px, jarak kabur ialah 5px, saiz bayang-bayang dikembangkan kepada 2px, dan warna bayang adalah hitam, dengan ketelusan 0.5.
2. Atribut bayang-teks
Selain atribut bayang-kotak, CSS juga menyediakan atribut bayangan-teks untuk mencapai kesan bayang-bayang pada teks. Dengan menambahkan atribut bayang-teks pada elemen teks, anda boleh menambah kesan bayang-bayang pada teks untuk menjadikannya lebih menonjol dan tiga dimensi. Sintaks atribut text-shadow adalah seperti berikut:text-shadow: h-shadow v-shadow blur color
- Berikut ialah contoh kod khusus yang melaksanakan tajuk dengan kesan bayang-bayang:
<!DOCTYPE html> <html> <head> <style> .shadow-title { font-size: 24px; color: #333; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } </style> </head> <body> <h1 class="shadow-title">投影效果标题</h1> </body> </html>Dalam kod di atas, dengan menambahkan gaya dengan tajuk-bayang kelas pada elemen tajuk, tajuk dengan kesan bayangan dilaksanakan tajuk . Nilai atribut teks-bayangan ditetapkan kepada "2px 2px 5px rgba(0, 0, 0, 0.5)", yang bermaksud bahawa kedudukan bayang-bayang mendatar dan menegak adalah 2px, jarak kabur ialah 5px, warna bayang-bayang ialah hitam, dan ketelusan ialah 0.5. - Melalui contoh kod di atas, kita dapat melihat bahawa kesan bayang-bayang elemen boleh dicapai dengan mudah menggunakan ciri-ciri bayang-kotak dan bayang-bayang teks CSS. Dalam pembangunan sebenar, kami boleh melaraskan nilai parameter dan tetapan warna mengikut keperluan khusus untuk mencapai kesan unjuran yang berbeza untuk meningkatkan kesan visual dan pengalaman pengguna halaman.
Atas ialah kandungan terperinci Cara menggunakan CSS untuk mencapai kesan bayangan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!