Border-image-repeat xususiyati
border-image-repeat xususiyati
chegaraning ichki qismining rasm shaklida
qanday takrorlanishini belgilaydi. Batafsil ma'lumot uchun
border-image xususiyatiga qarang.
Sintaksis
selektor {
border-image-repeat: stretch | repeat | round;
}
Qiymatlar
| Parametrlar soni | Tavsif |
|---|---|
stretch |
Chegaraning rasmini element o'lchamigacha cho'zadi. Bu standart qiymat hisoblanadi. |
repeat |
Chegaraning rasmini takrorlaydi. |
round |
Rasmni takrorlaydi va elementning bir tomonida butun sonli tasvirlar paydo bo'lishi uchun masshtablaydi. |
Standart qiymat: stretch.
Parametrlar soni
1 yoki 2 parametrni qabul qilishi mumkin.
Agar ikkita parametr berilsa, birinchisi
yuqori va pastki chegaralar uchun, ikkinchisi
esa chap va o'ng chegaralar uchun ishlatiladi.
Misol . Stretch qiymati
<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;
}
:
Misol . Repeat qiymati
<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;
}
:
Misol . Round qiymati
Hozir normal holatda
repeat qiymati o'rnatilgan,
hover holatida esa -
round. E'tibor bering, hover dan oldin
chegaraga butun bo'lmagan miqdordagi
romb joylashgan, hover dan keyin esa - butun. Bu
round ning ishlash usuli:
<div id="elem"></div>
#elem:hover {
border-image-repeat: round;
}
#elem {
border-style: solid;
border-width: 42px;
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Misol . Ikkita so'z
Eni uchun repeat qiymati
va balandligi uchun stretch qiymati:
<div id="elem"></div>
#elem {
border-image-repeat: repeat stretch;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Shuningdek qarang
-
border-imagexususiyati,
bu chegaraning rasm shakli uchun qisqartma hisoblanadi -
border-image-sourcexususiyati,
bu chegaraning rasm manbasini belgilaydi -
border-image-slicexususiyati,
bu chegaraning rasm bo'laklarini belgilaydi -
border-image-widthxususiyati,
bu chegaraning rasm o'lchamini belgilaydi -
border-image-outsetxususiyati,
bu chegaraning rasm siljishini belgilaydi