Egenskapen border-image

Egenskapen border-image setter bilde for kanten, den er en sammensatt egenskap for egenskapene border-image-source, border-image-slice, border-image-repeat, border-image-width og border-image-outset. Den sammensatte egenskapen dukket opp i CSS tidligere enn de enkelte egenskapene og derfor støttes den i flere eldre nettlesere.

Syntaks

velger {
	border-image: url(sti til bildet) offset/bredde/utskifting repetisjon;
}

Beskrivelse

Bildet som vi vil bruke for kanten, må være utformet på en spesiell måte: 4 mini bilder for hjørnene og 4 bilder for sidene. Eksempel på et slikt bilde:

I dette tilfellet er den sentrale delen latt hvit (fordi vi ikke vil at den skal havne på elementets bakgrunn). Eksempel på bilde med fylt sentral del:

Verdien slice forteller nettleseren, hvilke deler av bildet som skal gå til hjørnene, og hvilke som skal gå til sidene (og hvilken del som skal være sentral). Det går 4 deler til hjørnene, 4 deler går til sidene og en del (den sentrale) går til elementets bakgrunn (valgfritt, nøkkelordet fill).

Bildet "skjæres" i biter på følgende måte: for verdien slice angis fra en til fire verdier. La oss se på et eksempel. Anta at følgende verdier er angitt: 10 20 30 40 (piksler px angis ikke, dette er fordi bildet kan være både raster og vektor). Verdiene forteller følgende: 10 kutt av øverst, 20 kutt av til høyre, 30 kutt av nederst, 40 kutt av til venstre. Hvilken del av bildet havner i venstre øvre hjørne? Det vil være en bit: 10 øverst, 40 til venstre. I høyre øvre hjørne havner 10 øverst, 20 til høyre. Og så videre.

Oftest er bildet symmetrisk (som rombene over) og vi trenger å skjære av like biter for hjørnene. I så fall angis én verdi, som vil sette like offset fra alle sider. For å skjære av de oransje rombene, angir vi slice som 26 (siden den oransje romben har størrelse 26px på 26px). De gule rombene havner på linjene til kanten og følgende vil skje med dem: de vil enten strekkes over hele blokken eller vil gjentas langs kanten (avhenger av verdien 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;
}

Egenskapen border-image tillater ikke å angi tykkelsen på elementets kant. Nettleseren strekker bare bildet langs kanten med den eksisterende bredden. Derfor må den angis gjennom egenskapen border.

Brukere av eldre nettlesere (eller med deaktiverte bilder) vil se en standard ramme, angitt i border, så det er fornuftig å gi den passende stil og farge.

Verdier

Verdi	Beskrivelse
url(Sti til bilde)	Sti til bilde. Se mer i `border-image-source`.
offset	Forteller nettleseren hvilke deler av bildet som skal gå til hjørnene, og hvilke som skal gå til sidene (og hvilken del som skal være sentral). Mulige verdier: fra `1` til `4` tall \| fra `1` til `4` prosent. Mellomrom kan brukes til å angi nøkkelordet `fill` i tillegg til tall eller prosent. Se mer i `border-image-slice`.
bredde	Egenskapen styrer bredden på den synlige delen av rammen, skalerer den. Hvis denne verdien er større enn bredden på `border-width`, vil bildet av rammen krype under innholdet. Mulige verdier: CSS-enheter \| prosent \| tall \| `auto`. Se mer i `border-image-width`.
utskifting	Interessant egenskap som lar deg flytte rammen utenfor elementet. Negative verdier støttes ikke. Mulige verdier: CSS-enheter (unntatt % (?)) \| positivt tall \| auto. Se mer i `border-image-outset`.
repetisjon	Angir hvordan bildet skal gjentas på kantene (ikke på hjørnene): fliselegg eller strekk. Mulige verdier: `stretch` \| `repeat` \| `round` \| `space`. Se mer i `border-image-repeat`.

Standardverdi: none 100%/1/0 stretch (url(sti til bilde) offset/bredde/utskifting repetisjon).

Eksempel . border-image-repeat: verdien 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;
}

Eksempel . border-image-repeat: verdien 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;
}

Eksempel . border-image-repeat: verdien round

Nå er det i normal tilstand satt verdien repeat, og ved hovering - round. Legg merke til at før hovering passer det ikke et helt antall romber inn i kanten, men etter hovering - et helt antall. Slik fungerer 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;
}

Eksempel . border-image-repeat: to ord

Verdien repeat for bredde og stretch for høyde:

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

Eksempel . Samsvar mellom bildets bredde og kantens bredde

La oss øke border-width ved hovering med musepeker, samtidig som vi lar tykkelsen på border-image være den samme. Rombene vil strekkes over hele kanten:

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

Eksempel . border-image-slice

La oss ta et annet bilde, der de forskjellige bitene ikke er like:

La oss angi hvilke deler av bildet som skal skjæres av - 25% 30% 10% 20%. Dette fungerer slik: 25% - offset øverst, 30% - offset til høyre, 10% - offset nederst, 20% - offset til venstre. I praksis skjærer vi av hjørnene med disse bitene. Øverste venstre hjørne vil være 25% øverst på bildet, og 20% til venstre. Øverste høyre hjørne vil være 25% øverst på bildet, og 30% til høyre og så videre.

Også, hvis du holder musepekeren over blokken, vil nøkkelordet fill aktiveres, og den sentrale delen av bildet vil bli bakgrunnen til blokken vår:

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

Eksempel

La oss lage en gradientkant ved hjelp av lineær 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;
}

Eksempel . border-image-width

La oss sette verdien border-image-width til 2 (bildet av kanten vil bli 2 ganger større enn selve kanten) ved hovering med musepekeren på elementet (26/2 - angitt etter skråstreken, mens 26 er verdien for border-image-slice). Legg merke til at selve kanten ikke ble større, men bildet av kanten - ja, siden det vil krype under teksten:

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

Eksempel . border-image-outset

La oss sette verdien border-image-outset til 3 ved hovering med musepekeren på elementet. (26/1/2 - angitt etter den andre skråstreken, mens 26 er verdien for border-image-slice, og - 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;
}

Se også

egenskapen border-image-source,
som angir sti til bilde for kanten
egenskapen border-image-slice,
som angir oppdeling av bildet for kanten
egenskapen border-image-repeat,
som angir repetisjon av bildet for kanten
egenskapen border-image-width,
som angir størrelsen på bildet for kanten
egenskapen border-image-outset,
som angir forskyvning av bildet for kanten