CSS box-shadow özelliği
- Önceki sayfa box-reflect
- Sonraki sayfa box-sizing
Tanım ve kullanım
box-shadow özelliği, çubuğa bir veya daha fazla gölge ekler.
İpucu:Lütfen güzel esnek düğmeler oluşturmak için border-image-* özelliklerini kullanın!
Daha fazla bakın:
CSS3 eğitimi:CSS3 kenarlık
HTML DOM referans el kitabı:boxShadow özelliği
Örnek
div ögesine box-shadow ekleyin:
div
{
box-shadow: 10px 10px 5px #888888;
}
Daha fazla örnek sayfa altında bulunmaktadır.
CSS dilbilgisi
box-shadow: h-shadow v-shadow blur spread color inset;
Yorum:box-shadow, çubuğa bir veya daha fazla gölge ekler. Bu özellik, virgülle ayrılmış gölge listesidir, her gölge 2-4 uzunluk değeri, seçmeli renk değeri ve seçmeli inset anahtar kelimesi ile tanımlanır. Uzunluk değerlerini atlamak 0'dır.
Özellik değeri
| Değer | Açıklama | Test |
|---|---|---|
| h-shadow | Gerekli. Yatay gölgenin konumu. Negatif değerlere izin verilir. | Test |
| v-shadow | Gerekli. Dikey gölgenin konumu. Negatif değerlere izin verilir. | Test |
| blur | Opsiyonel. Bulanıklık mesafesi. | Test |
| spread | Opsiyonel. Gölgenin boyutu. | Test |
| color | Opsiyonel. Gölgenin rengi. CSS renk değerlerine bakın. | Test |
| inset | Opsiyonel. Dış gölgeyi (outset) iç gölgeye değiştir. | Test |
Teknik ayrıntılar
| Varsayılan değer: | yok |
|---|---|
| Mirasçılık: | hayır |
| Sürüm: | CSS3 |
| JavaScript dilbilgisi: | object.style.boxShadow="10px 10px 5px #888888" |
Daha fazla örnek
- Masanın üzerine atılan resim
- Bu örnek, 'Polarioid' resmini nasıl oluşturacağınızı ve resmi nasıl döndüreceğinizi gösterir.
Tarayıcı desteği
Tablo, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
Bilgiler -webkit- veya -moz- ile başlayan sayılar, önek kullanılan ilk sürümü gösterir.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
- Önceki sayfa box-reflect
- Sonraki sayfa box-sizing
