Eigenschap border-image

De eigenschap border-image stelt een afbeelding in voor de rand. Het is een samenvattende eigenschap voor de eigenschappen border-image-source, border-image-slice, border-image-repeat, border-image-width en border-image-outset. De samenvattende eigenschap verscheen eerder in CSS dan de samengevatte eigenschappen en wordt daarom ondersteund in een groter aantal oudere browsers.

Syntaxis

selector {
	border-image: url(pad naar afbeelding) offset/dikte/begin herhaling;
}

Beschrijving

De afbeelding die we willen gebruiken voor de rand, moet op een speciale manier worden opgemaakt: 4 mini-afbeeldingen voor de hoeken en 4 afbeeldingen voor de zijden. Voorbeeld van zo'n afbeelding:

In dit geval is het centrale deel wit gelaten (omdat we niet willen dat het op de achtergrond van het element valt). Voorbeeld van een afbeelding met een gevuld centraal deel:

De waarde slice vertelt de browser welke delen van de afbeelding naar de hoeken gaan, en welke naar de zijden (en welk deel centraal zal zijn). Naar de hoeken gaan 4 delen, naar de zijden gaan 4 delen en één deel (het centrale) gaat naar de achtergrond van het element (optioneel, trefwoord fill).

De afbeelding wordt als volgt "in stukjes gesneden": voor de waarde slice wordt een tot vier waarden opgegeven. Laten we het uitzoeken met een voorbeeld. Stel dat de volgende waarden zijn opgegeven: 10 20 30 40 (pixels px worden niet opgegeven, dit komt omdat de afbeelding zowel raster als vector kan zijn). De waarden geven het volgende aan: 10 boven afsnijden, 20 rechts afsnijden, 30 onder afsnijden, 40 links afsnijden. Welk deel van de afbeelding komt in de linker bovenhoek? Dit zal het stukje zijn: 10 boven, 40 links. In de rechter bovenhoek komt 10 boven, 20 rechts. En zo verder.

Meestal is de afbeelding symmetrisch (zoals de ruiten hierboven) en moeten we gelijke stukjes afsnijden voor de hoeken. In dat geval wordt één waarde opgegeven, die dezelfde offsets aan alle kanten instelt. Om de oranje ruiten af te snijden, geven we slice op als 26 (aangezien de oranje ruit een grootte heeft van 26px op 26px). De gele ruiten komen op de randlijnen en met hen gebeurt het volgende: ze worden ofwel uitgerekt over het hele blok of worden herhaald langs de rand (afhankelijk van de waarde 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;
}

De eigenschap border-image staat niet toe om de dikte van de rand van het element in te stellen. De browser rekt de afbeelding eenvoudigweg uit langs de rand met de bestaande breedte. Daarom moet deze worden ingesteld via de eigenschap border.

Gebruikers van oudere browsers (of met uitgeschakelde afbeeldingen) zien de standaardrand, ingesteld in border, dus het is logisch om deze een passende stijl en kleur te geven.

Waarden

Waarde	Beschrijving
url(Pad naar afbeelding)	Pad naar de afbeelding. Zie voor meer details `border-image-source`.
offset	Geeft de browser aan welke delen van de afbeelding naar de hoeken gaan, en welke naar de zijden (en welk deel centraal zal zijn). Mogelijke waarden: van `1` tot `4` getallen \| van `1` tot `4` procenten. Via een spatie kan het trefwoord `fill` worden ingesteld als aanvulling op getallen of percentages. Zie voor meer details `border-image-slice`.
dikte	Deze eigenschap beheert de breedte van het zichtbare deel van de rand, schaalt deze. Als deze waarde groter is dan de breedte van `border-width`, kruipt de randafbeelding onder de inhoud. Mogelijke waarden: CSS-eenheden \| procenten \| getal \| `auto`. Zie voor meer details `border-image-width`.
begin	Interessante eigenschap, die het mogelijk maakt om de rand buiten de grenzen van het element te verschuiven. Negatieve waarden worden niet ondersteund. Mogelijke waarden: CSS-eenheden (behalve % (?)) \| positief getal \| auto. Zie voor meer details `border-image-outset`.
herhaling	Geeft aan hoe de afbeelding op de randen moet worden herhaald (niet op de hoeken): tegel of uitrekken. Mogelijke waarden: `stretch` \| `repeat` \| `round` \| `space`. Zie voor meer details `border-image-repeat`.

Standaardwaarde: none 100%/1/0 stretch (url(pad naar afbeelding) offset/dikte/begin herhaling).

Voorbeeld . border-image-repeat: waarde 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;
}

Voorbeeld . border-image-repeat: waarde 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;
}

Voorbeeld . border-image-repeat: waarde round

Momenteel is in de normale staat de waarde repeat ingesteld, en bij zweven - round. Merk op dat vóór het zweven in de rand geen geheel aantal ruiten past, en na het zweven - wel. Zo werkt 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;
}

Voorbeeld . border-image-repeat: twee woorden

Waarde repeat voor breedte en stretch voor hoogte:

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

Voorbeeld . Overeenkomst breedte afbeelding met randbreedte

We verhogen border-width bij zweven van de muis, waarbij de dikte van border-image hetzelfde blijft. De ruiten rekken uit over de hele rand:

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

Voorbeeld . border-image-slice

Laten we een andere afbeelding nemen, waarin verschillende stukjes niet gelijk zijn:

We geven aan welke delen van de afbeelding moeten worden afgesneden - 25% 30% 10% 20%. Het werkt als volgt: 25% - offset boven, 30% - offset rechts, 10% - offset onder, 20% - offset links. In feite snijden we met deze stukjes de hoeken af. De linker bovenhoek wordt 25% vanaf de bovenkant van de afbeelding, en 20% vanaf links. De rechter bovenhoek wordt 25% vanaf de bovenkant van de afbeelding, en 30% vanaf rechts, enzovoort.

Ook, als u met de muis over het blok zweeft, dan wordt het trefwoord fill geactiveerd, en het centrale deel van de afbeelding wordt de achtergrond van ons blok:

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

Voorbeeld

Laten we een verlooprand maken met behulp van een lineair verloop:

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

Voorbeeld . border-image-width

Stel de waarde border-image-width in op 2 (de randafbeelding wordt 2 keer groter dan de rand zelf) bij zweven van de muis over het element (26/2 - opgegeven na de schuine streep, waarbij 26 - de waarde is van border-image-slice). Let op het feit dat de rand zelf niet is toegenomen, maar de randafbeelding - wel, omdat deze onder de tekst zal kruipen:

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

Voorbeeld . border-image-outset

Stel de waarde border-image-outset in op 3 bij zweven van de muis over het element. (26/1/2 - opgegeven na de tweede schuine streep, waarbij 26 - de waarde is van border-image-slice, en - 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;
}

Zie ook

eigenschap border-image-source,
die het pad naar de afbeelding voor de rand instelt
eigenschap border-image-slice,
die de verdeling van de afbeelding voor de rand instelt
eigenschap border-image-repeat,
die de herhaling van de afbeelding voor de rand instelt
eigenschap border-image-width,
die de grootte van de afbeelding voor de rand instelt
eigenschap border-image-outset,
die de verschuiving van de afbeelding voor de rand instelt