Web dasturlashga kirish Mavzu: css da chegaralar bilan ishlash Guruh: 961-20 Bajardi

Muhammad Al-Xorazmiy nomidagi Toshkent axborot texnologiyalari universiteti

Fan nomi: Web dasturlashga kirish

Mavzu: CSS da chegaralar bilan ishlash

Guruh: 961-20
Bajardi: Sobirov Jamshid

CSS -da chegaralar yaratish. Chegara mulki

CSS3 box-shadow xususiyatining qiziqarli dasturlaridan biri element atrofida ikki tomonlama chegara yaratishdir. Sahifani bezatish uchun juda qiziqarli effekt, lekin u faqat brauzerlarning yangi versiyalarida ishlaydi, ular faqat quti soyasini qo'llab-quvvatlaydi.Biroq, bu effektni yaratishning yana bir qancha usullari mavjud. Bundan tashqari, fon tasvirini aniq ishlatish idealdan uzoqdir.Ushbu qo'llanmada element atrofida ikki tomonlama chegara yaratishning beshta usuli keltirilgan. Va ulardan faqat bittasi tasvirni talab qiladi, qolganlarning hammasi brauzerlarda mukammal qo'llab -quvvatlanadigan sof CSS kodidan foydalanadi.

1 -usul: chegara va kontur

Bu usul faqat kontur xususiyatini qo'llab -quvvatlaydigan brauzerlarda ishlaydi (hamma IE6 / 7dan tashqari). Siz elementga chegara va kontur xususiyatlarini qo'shasiz. Bir (chegara: qattiq 6 piksel #fff; kontur: qattiq 6 piksel # 888;) Bu usulning ishlashining sababi shundaki, kontur ramkasi har doim to'rtburchakning tashqi tomoniga chiziladi. Anahat xususiyatidagi muammo suzuvchi elementlardan foydalanilganda yuzaga keladi, chunki chegara qo'shni elementlar bilan yopiladi.

2 -usul: soxta element

Ushbu usul ramkaning mutlaq joylashishini talab qiladi:Ikki (chegara: qattiq 6px #fff; pozitsiya: nisbiy; z -indeks: 1;). Ikki: oldin (tarkib: ""; ko'rsatish: blok; pozitsiya: mutlaq; tepada: -12 piksel; chap: -12 piksel; chegara: qattiq 6px # 888; kengligi: 312 piksel; to'ldirish-pastki: 12 piksel; min-balandligi: 100%; z-indeksi: 10;)Asosiy ko'rsatkichlar z-indeks xususiyatini (soxta element tarkibga to'g'ri kelishi uchun), joylashishni va minimal balandlik qiymatini belgilashdir. Oxirgi xususiyat ramkaning elastikligini saqlaydi.