Menguasai box-shadow dalam CSS: Panduan Ringkas

Harta box-shadow dalam CSS berfungsi sebagai mekanisme yang berkesan untuk pembangun memperkenalkan kedalaman dan dimensi kepada elemen HTML. Dengan memasukkan bayang-bayang ke dalam elemen, seseorang boleh meningkatkan realisme dan daya tarikan visual antara muka pengguna. Artikel ini akan menyelidiki asas box-shadow dan menawarkan contoh untuk membantu anda menguasai penggunaannya.

Memahami Asas

Sifat box-shadow terdiri daripada beberapa nilai yang mentakrifkan cara bayang itu akan muncul. Berikut ialah sintaks asas:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x: Parameter ini mentakrifkan sesaran mendatar bayang-bayang. Nilai positif mengalihkan bayang ke kanan, nilai negatif mengalihkannya ke kiri.
• offset-y: Parameter ini menunjukkan anjakan menegak bayang-bayang. Nilai positif menggerakkan bayang ke bawah, nilai negatif menaikkannya.
• jejari-kabur (pilihan): Tetapan ini mengawal kelembutan bayang-bayang. Nilai yang lebih tinggi menghasilkan bayang-bayang yang lebih tersebar. Jika parameter ini tidak dinyatakan, nilai lalai ialah 0, yang menghasilkan bayang-bayang yang berbeza.
• jejari sebaran (pilihan): Parameter ini mempengaruhi dimensi bayang-bayang. Nilai positif meningkatkan saiz bayang, nilai negatif mengurangkannya.
• warna: Atribut ini mentakrifkan warna bayang-bayang. Ia boleh menjadi sebarang perwakilan warna CSS yang sah, seperti #000, rgba(0,0,0,0.5) atau hsl(0, 0%, 50%).

Contoh: Bayang Kotak Asas

Mari lihat contoh mudah bayang-bayang kotak yang digunakan pada butang:

button {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

Dalam kes ini, bayang adalah diimbangi sebanyak 5px secara mendatar dan menegak, mempunyai jejari kabur 10px dan diwarnakan dengan hitam dengan 0.3 daripada kelegapan.

Contoh: Bayang-bayang Inset

bayang-kotak turut menyokong kata kunci inset, yang meletakkan bayang-bayang di dalam elemen, memberikan kesan ceruk.

div {
  box-shadow: inset 0 0 10px #000;
}

Di sini, bayang diletakkan di dalam div, menghasilkan kesan seolah-olah kandungan ditolak ke dalam.

Petua Lanjutan

• Anda mempunyai keupayaan untuk mencipta berbilang bayang-bayang dengan menggambarkan setiap spesifikasi bayang-kotak dengan koma. Teknik ini membolehkan penciptaan kesan bayang-bayang yang rumit dan berlapis.

box-shadow: 2px 2px 5px #aaa, -2px -2px 5px #ccc;

• Kesan bayang-bayang sering digunakan untuk menghasilkan interaksi tuding, meningkatkan interaktiviti butang atau kad.

button:hover {
  box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.4);
}

Bagi mereka yang lebih suka pendekatan yang lebih visual, lihat Penjana CSS Box-Shadow. Alat ini membolehkan anda membuat kesan bayang-bayang kotak tersuai dengan mudah, tanpa menulis sebarang kod dan menyimpan pratetap.

Atas ialah kandungan terperinci Menguasai box-shadow dalam CSS: Panduan Ringkas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!