boxShadow
Misol
div elementiga box-shadow qo‘shing:
document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";O‘zingiz sinab ko‘ring »
Tavsif
boxShadow xususiyati quti elementining soyalarini (drop-shadow) o‘rnatadi yoki qaytaradi.
Sintaksis
boxShadow xususiyatini qaytarish:
object.style.boxShadow
boxShadow xususiyatini o‘rnatish:
object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"
Eslatma: boxShadow xususiyati qutiga bir yoki bir nechta soya (drop-shadow) qo‘shadi. Bu xususiyat vergul bilan ajratilgan soyalar ro‘yxatidan iborat bo‘lib, har bir soya 2-4 ta uzunlik qiymati, ixtiyoriy rang va ixtiyoriy inset kalit so‘zi bilan beriladi. Tushirib qoldirilgan uzunliklar 0 ga teng.
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| none | Standart qiymat. Soya ko‘rsatilmaydi |
| h-shadow | Majburiy. Gorizontal soyaning joylashuvi. Manfiy qiymatlarga ruxsat beriladi |
| v-shadow | Majburiy. Vertikal soyaning joylashuvi. Manfiy qiymatlarga ruxsat beriladi |
| blur | Ixtiyoriy. Xiralashtirish masofasi |
| spread | Ixtiyoriy. Soyaning o‘lchami |
| color | Ixtiyoriy. Soyaning rangi. Standart qiymat — qora. Mumkin bo‘lgan rang qiymatlarining to‘liq ro‘yxatini CSS rang qiymatlari sahifasida ko‘ring. Eslatma: Safari’da (PC’da) color parametri majburiy. Agar rangni ko‘rsatmasangiz, soya umuman ko‘rsatilmaydi. |
| inset | Ixtiyoriy. Soyani tashqi soyadan (outset) ichki soyaga o‘zgartiradi |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Texnik tafsilotlar
| Standart qiymat: | none |
|---|---|
| Qaytariladigan qiymat: | Elementning box-shadow xususiyatini ifodalovchi String |
| CSS versiyasi | CSS3 |
Tegishli sahifalar
CSS ma’lumotnomasi: box-shadow xususiyati
Brauzerlarda qo‘llab-quvvatlash
boxShadow — CSS3 (1999) imkoniyati.
U barcha brauzerlarda to‘liq qo‘llab-quvvatlanadi:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Ha | Ha | Ha | Ha | Ha | 11 |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!