border-image
Misol
Element atrofidagi chegara sifatida rasm belgilang:
#borderimg {
border-image: url(border.png) 30 round;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
border-image xususiyati element atrofidagi chegara sifatida ishlatiladigan rasmni belgilash imkonini beradi.
border-image xususiyati quyidagilar uchun qisqartma xususiyatdir:
Tushirib qoldirilgan qiymatlar standart qiymatlariga o‘rnatiladi.
| Standart qiymat: | none 100% 1 0 stretch |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.borderImage="url(border.png) 30 round" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| border-image | 16 | 11 | 15 | 6 | 15 |
Eslatma: Har bir qiymatning brauzerlarda qo‘llab-quvvatlanishini quyida alohida ko‘ring.
CSS sintaksisi
border-image: source slice width outset repeat|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| border-image-source | Chegara sifatida ishlatiladigan rasmga yo‘l | Demo ❯ |
| border-image-slice | Chegara rasmini qanday bo‘laklarga bo‘lish | Demo ❯ |
| border-image-width | Chegara rasmining kengligi | Demo ❯ |
| border-image-outset | Chegara rasmi sohasining chegara qutisidan (border box) tashqariga chiqish miqdori | Demo ❯ |
| border-image-repeat | Chegara rasmi takrorlanishi, yaxlitlanishi (round) yoki cho‘zilishi kerakligi | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Turli slice qiymatlari chegara ko‘rinishini butunlay o‘zgartiradi:
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS chegara rasmlari
CSS ma’lumotnomasi: border-image-outset xususiyati
CSS ma’lumotnomasi: border-image-repeat xususiyati
CSS ma’lumotnomasi: border-image-slice xususiyati
CSS ma’lumotnomasi: border-image-source xususiyati
CSS ma’lumotnomasi: border-image-width xususiyati
HTML DOM ma’lumotnomasi: borderImage xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!