Īpašība border-image

Īpašība border-image iestata attēlu robežai, tā ir saīsinātā īpašība īpašībām border-image-source, border-image-slice, border-image-repeat, border-image-width un border-image-outset. Šī saīsinātā īpašība parādījās CSS agrāk nekā saīsinātās īpašības, un tāpēc tā tiek atbalstīta lielākā daudzumā veco pārlūkprogrammu.

Sintakse

selektors {
	border-image: url(ceļš uz attēlu) nobīde/biezums/nobīde atkārtošanās;
}

Apraksts

Attēls, kuru mēs vēlamies izmantot robežai, ir jānoformē īpašā veidā: 4 mini attēli stūriem un 4 attēli malām. Šāda attēla piemērs:

Šajā gadījumā centrālā daļa ir atstāta balta (jo mēs nevēlamies, lai tā nokļūtu uz elementa fona). Attēla piemērs ar aizpildītu centrālo daļu:

Vērtība slice norāda pārlūkprogrammai, kuras attēla daļas nonāks stūros, un kuras uz malām (un kura daļa būs centrālā). Stūros nonāk 4 daļas, uz malām nonāk 4 daļas un viena daļa (centrālā) nonāk uz elementa fona (neobligāti, atslēgas vārds fill).

Attēls tiek "sagriezts" gabaliņos sekojošā veidā: vērtībai slice tiek norādīta viena līdz četras vērtības. Apskatīsim ar piemēru. Pieņemsim, ka ir norādītas šādas vērtības: 10 20 30 40 (pikseļi px netiek norādīti, tas ir saistīts ar to, ka attēls var būt gan rastveida, gan vektoru). Vērtības runā par sekojošo: 10 nogriezt no augšas, 20 nogriezt no labās puses, 30 nogriezt no apakšas, 40 nogriezt no kreisās puses. Kura attēla daļa nonāks kreisajā augšējā stūrī? Tas būs gabaliņš: 10 no augšas, 40 no kreisās puses. Labajā augšējā stūrī nonāks 10 no augšas, 20 no labās puses. Un tā tālāk.

Visbiežāk attēls ir simetrisks (piemēram, rombiņi augstāk) un mums vajag nogriezt vienādus gabaliņus stūriem. Šajā gadījumā tiek norādīta viena vērtība, kas iestatīs vienādas nobīdes no visām pusēm. Lai nogrieztu oranžos rombiņus, mēs norādīsim slice kā 26 (jo oranžajam rombiņam ir izmērs 26px uz 26px). Dzeltenie rombiņi nonāks uz līnijām robežas un ar tiem notiks sekojošais: tie vai nu izstiepsies pa visu bloku, vai atkārtosies gar robežu (atkarīgs no vērtības repeat):

<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;
}

Īpašība border-image neļauj norādīt elementa robežas biezumu. Pārlūkprogramma vienkārši izstiepj attēlu gar robežu ar jau esošo platumu. Tāpēc to ir jāiestata caur īpašību border.

Veco pārlūkprogrammu lietotāji (vai ar izslēgtiem attēliem) redzēs standarta rāmi, kas iestatīta ar border, tāpēc ir jēga tai iestatīt piemērotus stilus un krāsu.

Vērtības

Vērtība	Apraksts
url(Ceils uz attēlu)	Ceļš uz attēlu. Sīkāk skatīties `border-image-source`.
nobīde	Norāda pārlūkprogrammai, kuras attēla daļas nonāks stūros, un kuras uz malām (un kura daļa būs centrālā). Iespējamās vērtības: no `1`-ā līdz `4`-iem cipariem \| no `1`-ā līdz `4`-iem procentiem. Caur atstarpi var tikt iestatīts atslēgas vārds `fill` papildus cipariem vai procentiem. Sīkāk skatīties `border-image-slice`.
biezums	Īpašība kontrolē redzamās robežas daļas platumu, mērogo to. Ja šī vērtība ir lielāka par `border-width` platumu, robežas attēls uzlīps zem satura. Iespējamās vērtības: CSS vienības \| procenti \| cipars \| `auto`. Sīkāk skatīties `border-image-width`.
nobīde	Interesanta īpašība, kas ļauj novirzīt rāmi ārpus elementa robežām. Negatīvas vērtības netiek atbalstītas. Iespējamās vērtības: CSS vienības (izņemot % (?)) \| pozitīvs cipars \| auto. Sīkāk skatīties `border-image-outset`.
atkārtošanās	Norāda, kā atkārtot attēlu uz robežām (ne stūros): izklāt vai izstiept. Iespējamās vērtības: `stretch` \| `repeat` \| `round` \| `space`. Sīkāk skatīties `border-image-repeat`.

Noklusējuma vērtība: none 100%/1/0 stretch (url(ceļš uz attēlu) nobīde/biezums/nobīde atkārtošanās).

Piemērs . border-image-repeat: vērtība repeat

<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;
}

Piemērs . border-image-repeat: vērtība stretch

<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;
}

Piemērs . border-image-repeat: vērtība round

Pašlaik normālā stāvoklī ir iestatīta vērtība repeat, bet, novadot peles kursoru - round. Ievērojiet, ka pirms kursora novadīšanas robežā ietilpst ne vesels daudzums rombiņu, bet pēc kursora novadīšanas - vesels. Tā strādā round:

<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;
}

Piemērs . border-image-repeat: divi vārdi

Vērtība repeat platumam un stretch augstumam:

<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;
}

Piemērs . Attēla platuma sakritība ar robežas platumu

Palielināsim border-width, novadot peles kursoru uz elementa, bet border-image biezumu atstāsim tādu pašu. Rombiņi izstiepsies pa visu robežu:

<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;
}

Piemērs . border-image-slice

Paņemsim citu attēlu, kurā dažādi gabaliņi nav vienādi:

Norādīsim, kuras daļas no attēla ir jānogriež - 25% 30% 10% 20%. Tas strādā šādi: 25% - atstarpe no augšas, 30% - atstarpe no labās puses, 10% - atstarpe no apakšas, 20% - atstarpe no kreisās puses. Būtībā ar šiem gabaliņiem mēs nogriežam stūrus. Augšējais kreisais stūris būs 25% no attēla augšas, un 20% no kreisās puses. Augšējais labais stūris būs 25% no attēla augšas, un 30% no labās puses, un tā tālāk.

Arī, ja jūs novadīsiet peles kursoru uz bloka, tad iedarbosies atslēgas vārds fill, un centrālā attēla daļa kļūs par mūsu bloka fona aizpildījumu:

<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;
}

Piemērs

Izveidosim gradientu robežu, izmantojot lineāro gradientu:

<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;
}

Piemērs . border-image-width

Iestatīsim vērtību border-image-width uz 2 (robežas attēls kļūs 2 reizes lielāks par pašu robežu), novadot peles kursoru uz elementa (26/2 - norādīts aiz slīpsvītras, kamēr 26 - šī ir vērtība border-image-slice). Ievērojiet, ka pati robeža nav palielinājusies, bet robežas attēls - jā, un tas uzlīps zem teksta:

<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;
}

Piemērs . border-image-outset

Iestatīsim vērtību border-image-outset uz 3, novadot peles kursoru uz elementa. (26/1/2 - norādīts aiz otrās slīpsvītras, kamēr 26 - šī ir vērtība border-image-slice, un - 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;
}

Skatīt arī

īpašība border-image-source,
kas iestata ceļu uz attēlu robežai
īpašība border-image-slice,
kas iestata attēla sadalīšanu robežai
īpašība border-image-repeat,
kas iestata attēla atkārtošanu robežai
īpašība border-image-width,
kas iestata attēla izmēru robežai
īpašība border-image-outset,
kas iestata attēla nobīdi robežai