Properti box-shadow CSS3 memungkinkan kita dengan mudah mencapai efek bayangan lapisan. Mari kita jelaskan atribut ini secara detail dalam praktiknya.
1. Kompatibilitas browser dari atribut box-shadow Pertama-tama mari kita lihat kompatibilitas browser dari atribut ini:
Opera: Saya tidak tahu versi mana yang mulai didukung. Ketika saya memposting artikel ini untuk pengujian, saya baru saja memperbarui Opera ke versi terbaru 10.53, yang sudah mendukung atribut box-shadow.
Firefox mendukung ini melalui properti pribadi -moz-box-shadow.
Safari dan Chrome mendukung ini melalui properti pribadi -webkit-box-shadow.
Tidak didukung oleh semua IE (saya tidak tahu apakah IE9 sudah membaik). Jangan khawatir, kami akan memperkenalkan beberapa Hacks untuk IE di akhir artikel.
2. Sintaks atribut box-shadow
box-shadow memiliki enam nilai yang dapat diatur:
img{box-shadow: Jenis bayangan Perpindahan sumbu X Perpindahan sumbu Y ukuran bayangan ekstensi bayangan warna bayangan}
Jika tidak ada jenis bayangan yang disetel, defaultnya adalah efek bayangan. Ketika diatur ke inset, ini adalah efek bayangan bagian dalam.
Perpindahan sumbu X dan sumbu Y tidak setara tetapi mirip dengan "sudut" dan "posisi" di photoshop.
Ukuran bayangan, ekstensi, warna sama seperti di Photoshop.
3. Contoh analisis Mari kita lihat efek box-shadow melalui beberapa contoh. Pertama, buatlah HTML sederhana untuk pengujian:
<html>
<kepala>
<style type="text/css">Tulis bagian CSS di sini</style>
</kepala>
<tubuh>
<img src="uji.jpg" />
</tubuh>
</html>
Harap dicatat: Untuk menghindari masalah, hanya box-shadow yang ditulis dalam kode CSS di bawah ini. Dalam penggunaan sebenarnya, Anda juga harus menulis -moz-box-shadow dan -webkit-shadow. Yang perlu Anda lakukan sangat sederhana, salin dua bayangan kotak dan tambahkan -moz- dan -webkit- di depannya.
gambar {
-moz-kotak-bayangan:2px 2px 10px #06C;
-webkit-kotak-bayangan:2px 2px 10px #06C;
bayangan-kotak:2px 2px 10px #06C;
}
(1). Drop shadow, tanpa perpindahan, ukuran bayangan 10px, tanpa ekspansi, warna #06C
img{bayangan-kotak:0 0 10px #06C;}
Nilai warna disini adalah nilai HEX, kita juga bisa menggunakan nilai RGBA. Kelebihan nilai RGBA adalah memiliki tambahan nilai transparansi Alpha, dan Anda dapat mengontrol transparansi bayangan.
img{bayangan kotak: 0 0 10px rgba(0, 255, 0, .5)}
(2). Tambahkan ekstensi 20px ke atas
img{bayangan-kotak:0 0 10px 20px #06C;}
(3). Bayangan dalam, tanpa perpindahan, ukuran 10 piksel, tanpa perluasan, warna #06C
img{kotak-bayangan:inset 0 0 10px #06C;}
(4).
Box-shadow dapat digunakan beberapa kali secara bersamaan. Mari kita gunakan bayangan empat warna.
img{bayangan-kotak:-10px 0 10px merah, bayangan-kotak:10px 0 10px biru,bayangan-kotak:0 -10px 10px kuning,bayangan-kotak:0 10px 10px hijau}
(5) Urutan penggunaan beberapa atribut bayangan. Saat menggunakan beberapa atribut bayangan untuk elemen yang sama, Anda perlu memperhatikan urutannya. Misalnya, dalam kode berikut, pertama-tama kita menulis bayangan hijau 10px, lalu menulis ukuran 10px tetapi diperluas dengan bayangan 20px. Hasilnya adalah: lapisan berbayang hijau di atas lapisan berbayang kuning.
img{bayangan-kotak:0 0 10px hijau;bayangan-kotak:0 0 10px 20px kuning}
Namun jika kita ubah urutannya seperti ini:
img{bayangan-kotak:0 0 10px 20px kuning,bayangan-kotak:0 0 10px hijau;}
Kita tidak akan bisa melihat lapisan berbayang hijau yang ditulis kemudian karena ditutupi oleh lapisan kuning yang ditulis pertama dan dengan radius lebih besar.
4. Biarkan IE juga mendukung box-shadow
IE sendiri menggunakan filter bayangan untuk mendapatkan efek serupa, dan ada juga beberapa file hack js dan .htc yang dapat membantu Anda mencapai efek ini di IE. Saya tidak bisa mencoba semuanya, jadi di sini saya hanya memperkenalkan satu yang pernah saya gunakan.
ie-css3.htc adalah file htc yang memungkinkan browser IE mendukung beberapa properti CSS3, tidak hanya box-shadow, tetapi juga memungkinkan browser IE Anda mendukung atribut sudut membulat border-radius dan atribut text-shadow text-shadow .
Cara menggunakannya: unduh dan letakkan di direktori server Anda
Tulis kode berikut di <head></head> Anda:
<!--[jika YAITU]>
<gaya tipe="teks/css">
img, #testdiv, .testbox{perilaku: url( http://domainanda.com/js/ie-css3.htc );}
</gaya>
<![endif]-->
Di bagian biru, masukkan pemilih menggunakan atribut box-shadow, dan di bagian hijau, masukkan jalur absolut atau jalur relatif ie-css3.htc.
Maka tidak apa-apa. Namun masih ada beberapa hal yang perlu diperhatikan:
Saat Anda menggunakan file htc ini, selama box-shadow, -moz-box-shadow atau -webkit-box-shadow ditulis di CSS Anda, IE akan merendernya.
Saat menggunakan file htc ini, Anda tidak dapat menulis box-shadow: 0 0 10px red; tetapi box-shadow: 0px 0px 10px red;
Transparansi alfa dalam nilai RGBA tidak didukung.
Sisipkan bayangan bagian dalam tidak didukung.
Ekspansi bayangan tidak didukung.
Bayangan hanya akan tampak hitam di IE, apa pun warna lain yang Anda atur.
Jadi, skrip ini hanya mengizinkan IE untuk mendukung beberapa nilai box-shadow. Jika Anda memiliki skrip peretasan IE lain yang lebih baik, silakan tinggalkan pesan untuk dibagikan.