Savybė border-image

Savybė border-image nustato paveikslėlį rėmeliui, ji yra sutrumpinta savybė savybėms border-image-source, border-image-slice, border-image-repeat, border-image-width ir border-image-outset. Tuo tarpu sutrumpinta savybė atsirado CSS anksčiau nei sutrumpinamos savybės ir todėl palaikoma daugelyje senų naršyklių.

Sintaksė

selektorius {
	border-image: url(paveikslėlio kelias) poslinkis/storis/atstumas kartojimas;
}

Aprašas

Paveikslėlis, kurį norime pritaikyti rėmeliui, turi būti suformuotas specialiu būdu: 4 mini paveikslėliai kampams ir 4 paveikslėliai šonams. Tokio paveikslėlio pavyzdys:

Šiuo atveju centrinė dalis palikta balta (nes nenorime, kad ji patektų ant elemento fono). Paveikslėlio pavyzdys su užpildyta centrine dalimi:

Reikšmė slice nurodo naršyklei, kurios paveikslėlio dalys bus skirtos kampams, o kurios šonams (ir kuri dalis bus centrinė). Į kampus eina 4 dalys, į šonus eina 4 dalys ir viena dalis (centrinė) eina į elemento foną (pasirinktinai, raktinis žodis fill).

Paveikslėlis "perpjautas" į gabaliukus tokiu būdu: reikšmei slice nurodoma nuo vienos iki keturių reikšmių. Paanalizuokime pavyzdžiu. Tarkime, nurodytos šios reikšmės: 10 20 30 40 (pikseliai px nenurodomi, tai susiję su tuo, kad paveikslėlis gali būti ir rastrinis ir vektorinis). Reikšmės rodo tai: 10 nukirpti viršuje, 20 nukirpti dešinėje, 30 nukirpti apačioje, 40 nukirpti kairėje. Kuri paveikslėlio dalis pateks į kairįjį viršutinį kampą? Tai bus gabaliukas: 10 viršuje, 40 kairėje. Į dešinįjį viršutinį kampą pateks 10 viršuje, 20 dešinėje. Ir taip toliau.

Dažniausiai paveikslėlis simetriškas (kaip rombai aukščiau) ir mums reikia nukirpti vienodus gabaliukus kampams. Tokiu atveju nurodoma viena reikšmė, kuri nustatys vienodus poslinkius iš visų pusių. Norėdami nukirpti oranžinius rombus, nurodysime slice kaip 26 (nes oranžinis rombas turi dydį 26px ir 26px). Geltoni rombai pateks į rėmelio linijas ir su jais atsitiks taip: jie arba bus ištempti per visą bloką, arba bus kartojami išilgai rėmelio (priklauso nuo reikšmės 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;
}

Savybė border-image neleidžia nurodyti elemento rėmelio storio. Naršyklė tiesiog ištempia paveikslėlį išilgai rėmelio su jau esančiu plotiu. Todėl jį reikia nustatyti per savybę border.

Senų naršyklių naudotojai (arba su išjungtais paveikslėliais) pamatys standartinį rėmelį, nustatytą border, todėl prasminga jį nustatyti tinkamu stiliumi ir spalva.

Reikšmės

Reikšmė	Aprašas
url(Paveikslėlio kelias)	Kelias į paveikslėlį. Išsamiau žiūrėkite `border-image-source`.
poslinkis	Nurodo naršyklei, kurios paveikslėlio dalys pateks į kampus, o kurios į šonus (ir kuri dalis bus centrinė). Galimos reikšmės: nuo `1`-os iki `4`-ių skaičių \| nuo `1`-os iki `4`-ių procentų. Per tarpą gali būti nustatomas raktinis žodis `fill` be skaičių ar procentų. Išsamiau žiūrėkite `border-image-slice`.
storis	Savybė valdo matomos rėmelio dalies plotį, keičia jo mastelį. Jei ši reikšmė didesnė už `border-width` plotį, rėmelio paveikslėlis įsibraus po turiniu. Galimos reikšmės: CSS vienetai \| procentai \| skaičius \| `auto`. Išsamiau žiūrėkite `border-image-width`.
atstumas	Įdomi savybė, leidžianti pastumti rėmelį už elemento ribų. Neigiamos reikšmės nepalaikomos. Galimos reikšmės: CSS vienetai (išskyrus % (?)) \| teigiamas skaičius \| auto. Išsamiau žiūrėkite `border-image-outset`.
kartojimas	Nurodo, kaip kartoti paveikslėlį rėmeliuose (ne kampuose): iškloti arba ištempti. Galimos reikšmės: `stretch` \| `repeat` \| `round` \| `space`. Išsamiau žiūrėkite `border-image-repeat`.

Numatytoji reikšmė: none 100%/1/0 stretch (url(paveikslėlio kelias) poslinkis/storis/atstumas kartojimas).

Pavyzdys . border-image-repeat: reikšmė 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;
}

Pavyzdys . border-image-repeat: reikšmė 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;
}

Pavyzdys . border-image-repeat: reikšmė round

Dabar normalioje būsenoje nustatyta reikšmė repeat, o užvedus pelę - round. Atkreipkite dėmesį, kad prieš užvedant į rėmelį patenka ne sveikas skaičius rombų, o po užvedimo - sveikas. Taip veikia 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;
}

Pavyzdys . border-image-repeat: du žodžiai

Reikšmė repeat plotiui ir stretch aukščiui:

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

Pavyzdys . Paveikslėlio pločio sutapimas su rėmelio plotimi

Padidinkime border-width užvedus pelę, tuo tarpu storį border-image palikime tokią pat. Rombei bus ištempti per visą rėmelį:

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

Pavyzdys . border-image-slice

Paimkime kitą paveikslėlį, kuriame skirtingi gabaliukai nėra vienodi:

Nurodykime, kurios paveikslėlio dalys turi būti nukirstos - 25% 30% 10% 20%. Veikia tai taip: 25% - atitraukimas viršuje, 30% - atitraukimas dešinėje, 10% - atitraukimas apačioje, 20% - atitraukimas kairėje. Iš esmės šiais gabaliukais nukertame kampus. Viršutinis kairysis kampas bus 25% paveikslėlio viršuje, ir 20% kairėje. Viršutinis dešinysis kampas bus 25% paveikslėlio viršuje, ir 30% dešinėje ir taip toliau.

Taip pat, jei užvesite pelę ant bloko, tai suveiks raktinis žodis fill, ir centrinė paveikslėlio dalis taps mūsų bloko fonu:

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

Pavyzdys

Sukurkime gradientinį rėmelį naudodami tiesinį gradientą:

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

Pavyzdys . border-image-width

Nustatykime reikšmę border-image-width kaip 2 (rėmelio paveikslėlis taps 2 karto didesnis už patį rėmelį) užvedus pelę ant elemento (26/2 - nurodyta po brūkšnio, o 26 - tai reikšmė border-image-slice). Atkreipkite dėmesį į tai, kad pats rėmelis nedidėjo, o rėmelio paveikslėlis - taip, nes jis įsibraus po tekstu:

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

Pavyzdys . border-image-outset

Nustatykime reikšmę border-image-outset kaip 3 užvedus pelę ant elemento. (26/1/2 - nurodyta po antrojo brūkšnio, o 26 - tai reikšmė border-image-slice, o - 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;
}

Taip pat žiūrėkite

savybė border-image-source,
kuri nustato kelią į paveikslėlį rėmeliui
savybė border-image-slice,
kuri nustato paveikslėlio skaidymą rėmeliui
savybė border-image-repeat,
kuri nustato paveikslėlio kartojimą rėmeliui
savybė border-image-width,
kuri nustato paveikslėlio dydį rėmeliui
savybė border-image-outset,
kuri nustato paveikslėlio pastūmą rėmeliui