box-shadow
Misol
Turli <div> elementlariga soya qo‘shing:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow: 5px 10px #888888;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
box-shadow xususiyati elementga bir yoki bir nechta soya biriktiradi.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | ha. animatable haqida o‘qing Sinab ko‘ring |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.boxShadow="10px 20px 30px blue" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| box-shadow | 10 | 9 | 4 | 5 | 10.5 |
CSS sintaksisi
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
Eslatma: Elementga bir nechta soya biriktirish uchun vergul bilan ajratilgan soyalar ro‘yxatini qo‘shing (quyidagi "O‘zingiz sinab ko‘ring" misoliga qarang).
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| none | Standart qiymat. Soya ko‘rsatilmaydi | Demo ❯ |
| h-offset | Majburiy. Soyaning gorizontal siljishi. Musbat qiymat soyani qutining o‘ng tomoniga, manfiy qiymat esa chap tomoniga joylashtiradi | Demo ❯ |
| v-offset | Majburiy. Soyaning vertikal siljishi. Musbat qiymat soyani qutining ostiga, manfiy qiymat esa ustiga joylashtiradi | Demo ❯ |
| blur | Ixtiyoriy. Xiralik radiusi. Son qanchalik katta bo‘lsa, soya shunchalik xira bo‘ladi | Demo ❯ |
| spread | Ixtiyoriy. Yoyilish radiusi. Musbat qiymat soya o‘lchamini kattalashtiradi, manfiy qiymat esa kichraytiradi | Demo ❯ |
| color | Ixtiyoriy. Soya rangi. Standart qiymati — matn rangi. Mumkin bo‘lgan rang qiymatlarining to‘liq ro‘yxati uchun CSS rang qiymatlari sahifasiga qarang. Eslatma: Safari’da (PC’da) color parametri majburiy. Agar rangni ko‘rsatmasangiz, soya umuman ko‘rsatilmaydi. |
Demo ❯ |
| inset | Ixtiyoriy. Soyani tashqi soyadan (outset) ichki soyaga o‘zgartiradi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Maslahat: Ruxsat etilgan qiymatlar (CSS uzunlik birliklari) haqida batafsil o‘qing
Ko‘proq misollar
Misol
Soyaga xiralik effektini qo‘shing:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
O‘zingiz sinab ko‘ring »
Misol
Soyaning yoyilish radiusini belgilang:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
O‘zingiz sinab ko‘ring »
Misol
Bir nechta soya belgilang:
#example1 {
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}
O‘zingiz sinab ko‘ring »
Misol
inset kalit so‘zini qo‘shing:
#example1 {
box-shadow: 5px 10px inset;
}
O‘zingiz sinab ko‘ring »
Misol
Stol ustiga tashlangan rasmlar. Bu misol "polaroid" rasmlarni yaratish va ularni burish usulini ko‘rsatadi:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid #BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS blok soyasi
HTML DOM ma’lumotnomasi: boxShadow xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!