Border-image xususiyati
border-image xususiyati chegara uchun rasmni
belgilaydi, u border-image-source,
border-image-slice,
border-image-repeat,
border-image-width
va border-image-outset
xususiyatlari uchun qisqartma xususiyat hisoblanadi.
Bunda qisqartma xususiyat CSSda qisqartirilgan xususiyatlardan
oldin paydo bo'lgan va shuning uchun eski brauzerlarning
ko'proq qismida qo'llab-quvvatlanadi.
Sintaksis
selector {
border-image: url(rasmga yo'l) siljish/qalinlik/o'zgartirish takrorlash;
}
Tavsif
Biz chegara uchun qo'llamoqchi bo'lgan rasm
maxsus tarzda rasmlangan bo'lishi kerak: burchaklar
uchun 4 mini rasm va tomonlar uchun 4 rasm.
Bunday rasmga misol:
Bu holda markaziy qism oq rangda qoldirilgan (chunki biz uning element foniga tushishini xohlamaymiz). To'ldirilgan markaziy qismi bilan rasm misoli:
slice qiymati brauzerga rasmning qaysi
qismlari burchaklarga, qaysi qismlari tomonlarga
borishini (va qaysi qismi markaziy bo'lishini) ko'rsatadi.
Burchaklarga 4 qism, tomonlarga 4 qism
va bitta qism (markaziy) element foniga boradi
(ixtiyoriy, fill kalit so'zi).
Rasm quyidagicha bo'laklarga "kesiladi": slice
qiymati uchun birdan to'rtgacha qiymat ko'rsatiladi.
Keling, misol bilan ko'rib chiqaylik. Quyidagi qiymatlar
ko'rsatilgan deb faraz qilaylik: 10 20 30 40
(piksel px ko'rsatilmaydi, buning sababi rasm ham
raster, ham vektor bo'lishi mumkin). Qiymatlar quyidagilarni
aytadi: 10 yuqoridan kesish, 20 o'ngdan
kesish, 30 pastdan kesish, 40 chapdan
kesish. Rasmning qaysi qismi chap yuqori burchakka
tushadi? Bu bo'lak bo'ladi: 10 yuqoridan,
40 chapdan. O'ng yuqori burchakka 10
yuqoridan, 20 o'ngdan tushadi. Va hokazo.
Ko'pincha rasm simmetrikdir (yuqoridagi rombchilar kabi)
va biz burchaklar uchun teng bo'laklarni kesib olishimiz
kerak. Bunday holda bitta qiymat ko'rsatiladi, u
hamma tomondan bir xil siljishlarni belgilaydi.
Apelsin rombchilarini kesib olish uchun biz slice
ni 26 da ko'rsatamiz (chunki apelsin rombchasi
26px ga 26px o'lchamga ega). Sariq rombchilar
chegara chizig'iga tushadi va ularga quyidagilar sodir
bo'ladi: ular butun blok bo'ylab cho'ziladi yoki chegara
bo'ylab takrorlanadi (repeat qiymatiga bog'liq):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: stretch;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
border-image xususiyati element chegarasining
qalinligini ko'rsatishga imkon bermaydi. Brauzer
shunchaki rasmni allaqachon mavjud bo'lgan kenglikdagi
chegara bo'ylab cho'zadi. Shuning uchun uni border
xususiyati orqali belgilash kerak.
Eski brauzerlar foydalanuvchilari (yoki o'chirilgan
rasmlar bilan) border da belgilangan standart
ramkani ko'radilar, shuning uchun unga mos uslub
va rangni belgilash mantiqan.
Qiymatlar
| Qiymat | Tavsif |
|---|---|
| url(Rasmga yo'l) |
Rasmga yo'l. Batafsil border-image-source ga qarang.
|
| siljish |
Brauzerga rasmning qaysi qismlari burchaklarga,
qaysi qismlari tomonlarga (va qaysi qismi markaziy bo'lishini) borishini ko'rsatadi.
Mumkin qiymatlar: 1 dan 4 gacha raqamlar | 1 dan 4 gacha foizlar.
Bo'sh joy orqali raqamlar yoki foizlar qo'shimchasida fill kalit so'zi belgilanishi mumkin.
Batafsil border-image-slice ga qarang.
|
| qalinlik |
Xususiyat ko'rinadigan ramka qismining kengligini boshqaradi, uni masshtablaydi.
Agar bu qiymat border-width kengligidan katta bo'lsa, ramka rasmi
element mazmuni ostiga kiradi.
Mumkin qiymatlar: CSS birliklari | foizlar | raqam | auto.
Batafsil border-image-width ga qarang.
|
| o'zgartirish |
Ramkani element chetlaridan tashqariga siljitishga imkon beradigan qiziqarli xususiyat.
Salbiy qiymatlar qo'llab-quvvatlanmaydi.
Mumkin qiymatlar: CSS birliklari (% dan tashqari (?)) | musbat raqam | auto.
Batafsil border-image-outset ga qarang.
|
| takrorlash |
Chegaralarda (burchaklarda emas) rasmni qanday takrorlashni ko'rsatadi:
plitalash yoki cho'zish.
Mumkin qiymatlar: stretch | repeat | round | space.
Batafsil border-image-repeat ga qarang.
|
Standart qiymat: none 100%/1/0 stretch
(url(rasmga yo'l) siljish/qalinlik/o'zgartirish
takrorlash).
Misol . border-image-repeat: repeat qiymati
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . border-image-repeat: stretch qiymati
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . border-image-repeat: round qiymati
Hozir normal holatda repeat qiymati o'rnatilgan,
ocharganda esa - round. E'tibor bering, ocharishdan
oldin chegaraga rombchalarning butun soni sig'maydi,
ocharishdan keyin esa - butun soni sig'adi. round
shunday ishlaydi:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26 round;
}
#elem {
border-style: solid;
border-width: 42px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . border-image-repeat: ikkita so'z
Kenglik uchun repeat qiymati va balandlik uchun stretch qiymati:
<div id="elem"></div>
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat stretch;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . Rasm kengligining chegara kengligiga mos kelishi
Sichqonchani olganda border-width ni oshiramiz,
bunda border-image qalinligini bir xil qoldiramiz.
Rombchalar butun chegara bo'ylab cho'ziladi:
<div id="elem"></div>
#elem:hover {
border-width: 52px;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . border-image-slice
Boshqa rasmni olaylik, unda turli bo'laklar teng emas:
Rasmning qaysi qismlarini kesib olish kerakligini
ko'rsatamiz - 25% 30% 10% 20%. Bu
shunday ishlaydi: 25% - yuqoridan chetlashtirish, 30% - o'ngdan
chetlashtirish, 10% - pastdan chetlashtirish, 20% - chapdan
chetlashtirish. Aslida bu bo'laklar bilan biz
burchaklarni kesib olamiz. Yuqori chap burchak
rasmning 25% yuqorisidan, va 20% chapdan bo'ladi. Yuqori
o'ng burchak rasmning 25% yuqorisidan,
va 30% o'ngdan bo'ladi va hokazo.
Shuningdek, agar siz sichqonchani blok ustiga olib kelsangiz,
fill kalit so'zi ishlaydi va rasmning markaziy
qismi bizning blokimizning foniga aylanadi:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
border-style: solid;
border-width: 52px;
border-image: url("image.png") 25% 30% 10% 20% stretch;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
Misol
chiziqli gradient yordamida gradientli chegara yaratamiz:
<div id="elem"></div>
#elem {
background: green;
border-image: linear-gradient(to bottom, red, blue) 30;
border-width: 30px;
border-style: solid;
width: 200px;
height: 200px;
margin: 0 auto;
}
:
Misol . border-image-width
border-image-width qiymatini 2 ga o'rnatamiz
(chegara rasmi chegara o'zidan 2 marta
katta bo'ladi) sichqonchani element ustiga olganda
(26/2 - chiziqchadan keyin ko'rsatildi, bunda
26 - border-image-slice qiymati).
E'tibor bering, chegara o'zi oshmadi, lekin chegara
rasmi - ha, chunki u matn ostiga kiradi:
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/2 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . border-image-outset
border-image-outset qiymatini
3 ga o'rnatamiz sichqonchani element ustiga olganda.
(26/1/2 - ikkinchi chiziqchadan keyin ko'rsatildi, bunda
26 - border-image-slice qiymati,
a - 1 - border-image-width):
<div id="elem"></div>
#elem:hover {
border-image: url("image.png") 26/1/3 repeat;
}
#elem {
border-style: solid;
border-width: 26px;
border-image: url("image.png") 26 repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Shuningdek qarang
-
border-image-sourcexususiyati,
chegara uchun rasmga yo'lni belgilaydi -
border-image-slicexususiyati,
chegara uchun rasmni bo'lishni belgilaydi -
border-image-repeatxususiyati,
chegara uchun rasmni takrorlashni belgilaydi -
border-image-widthxususiyati,
chegara uchun rasm o'lchamini belgilaydi -
border-image-outsetxususiyati,
chegara uchun rasmni siljitishni belgilaydi
