Tutorial CSS3 properti box-shadow Terbaik Pada tahun 2024, Dalam tutorial ini Anda dapat mempelajari contoh,Dukungan Browser,Definisi atribut dan petunjuk,tatabahasa,contoh online,Artikel terkait,

CSS3 properti box-shadow

contoh

Menambah div elemen shadow:

div
{
box-shadow: 10px 10px 5px #888888;
}

Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi properti.

Segera setelah -webkit- digital, -ms- atau moz lalu mendukung awalan atribut nomor versi browser pertama.

milik
border-image 10,0 -webkit- 9.0.0 4.0 (2.0) [3]
3.5 (1.9.1)
moz
5.1 [1]
3.0
-webkit
10.5 [1]
-o-

Definisi atribut dan petunjuk

Properti kotak-shadow dapat menetapkan satu atau lebih dari kotak drop shadow.

default: tak satupun
warisan: tidak
versi: CSS3
sintaks JavaScript: keberatan .style.boxShadow = "10px 10px 5px #888888"


tatabahasa

box-shadow:h-shadow v-shadow blur spread colorinset;

Catatan: properti boxShadowuntuk menambahkan satu atau lebih drop shadow ke frame. Properti adalah daftar dipisahkan koma bayangan, masing-masing dinaungi oleh 2-4 nilai panjang, nilai warna opsional dan inset kata kunci opsional ditentukan. Menghilangkan nilai panjang adalah 0.

nilai penjelasan
h-shadow Diperlukan. Posisi bayangan horizontal. Izinkan negatif
v-shadow Diperlukan. Posisi vertikal bayangan. Izinkan negatif
kekaburan Opsional. Fuzzy Jarak
penyebaran Opsional. Ukuran bayangan
warna Opsional. warna bayangan. Dalam nilai-nilai warna CSS untuk menemukan daftar lengkap dari nilai warna
sisipan Opsional. Dari bayangan lapisan luar (di awal) untuk mengubah bayangan bayangan batin


contoh

contoh online

image Putar
Contoh ini menunjukkan cara membuat "polaroid" Foto dan memutar gambar.


Artikel terkait

CSS3 tutorial: CSS3 Borders

CSS3 properti box-shadow
10/30