CSS hoshiya rasmlari

CSS border-image xossasi

border-image xossasi oddiy chegara o‘rniga element atrofidagi chegara sifatida ishlatiladigan rasmini belgilash imkonini beradi.

Bu xossa rasmini olib, uni xo‘ (tic-tac-toe) taxtasi kabi to‘qqiz bo‘lakka ajratadi. Keyin burchaklarni burchaklarga joylashtiradi, o‘rta bo‘laklar esa ko‘rsatganingizdek takrorlanadi yoki cho‘ziladi.

border-image xossasi quyidagi xossalarning qisqartmasidir:

• border-image-source — rasm manzilini belgilaydi
• border-image-slice — rasmni qanday bo‘laklarga ajratishni belgilaydi
• border-image-width — rasm kengligini belgilaydi
• border-image-outset — chegara rasmi maydoni chegara qutisidan qancha tashqariga chiqishini belgilaydi
• border-image-repeat — rasmni qanday takrorlashni belgilaydi

Eslatma: border-image ishlashi uchun elementda border xossasi ham belgilangan bo‘lishi kerak!

CSS border-image misollari

Quyidagi rasmdan foydalanamiz (nomi "border.png"):

Quyidagi misolda url(border.png) manba rasmini ko‘rsatadi, 30 soni rasmni har bir chetdan 30 piksel bo‘laklarga ajratadi, round qiymati esa rasmning o‘rta bo‘lagini maydonni to‘ldirish uchun kafel (takrorlanish) shaklida joylashtirilishini ko‘rsatadi (kerak bo‘lsa, sig‘ishi uchun qayta masshtablanadi):

Mana kod:

Bu yerda stretch qiymati rasmning o‘rta bo‘lagi maydonni to‘ldirish uchun cho‘zilishini ko‘rsatadi:

Mana kod:

CSS border-image — Turli slice qiymatlari

Turli slice qiymatlari chegara rasmining ko‘rinishini butunlay o‘zgartiradi:

Misol 1:

Misol 2:

Misol 3:

Mana kod:

CSS chegara rasmi xossalari