Beranda>Tutorial Desain Web>Efek khusus web

Tutorial menggunakan properti CSS3 box-shadow

Penulis：Eve Cole Waktu Pembaruan：2010-05-14 17:29:27

Properti box-shadow CSS3 memungkinkan kita dengan mudah mencapai efek bayangan lapisan. Mari kita jelaskan atribut ini secara detail dalam praktiknya.

1. Kompatibilitas browser dengan atribut box-shadow

Pertama 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 bayangan kotak 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.

    img {
    -moz-box-shadow:2px 2px 10px #06C;
    -webkit-box-shadow:2px 2px 10px #06C;
    box-shadow:2px 2px 10px #06C;
    }
Artikel Terkait