Egenskapen border-image

Egenskapen border-image sätter en bild för ramen, det är en sammandragen egenskap för egenskaperna border-image-source, border-image-slice, border-image-repeat, border-image-width och border-image-outset. Den sammandragna egenskapen dök upp i CSS tidigare än de sammandragna egenskaperna och stöds därför i ett större antal äldre webbläsare.

Syntax

selector {
	border-image: url(sökväg till bilden) offset/bredd/utskjutning upprepning;
}

Beskrivning

Bilden som vi vill använda för ramen måste vara utformad på ett speciellt sätt: 4 mini bilder för hörnen och 4 bilder för sidorna. Exempel på en sådan bild:

I det här fallet är den centrala delen lämnad vit (eftersom vi inte vill att den ska hamna på elementets bakgrund). Exempel på bild med ifylld central del:

Värdet slice talar om för webbläsaren, vilka delar av bilden som ska gå till hörnen, och vilka som ska gå till sidorna (och vilken del som blir den centrala). Till hörnen går 4 delar, till sidorna går 4 delar och en del (den centrala) går till elementets bakgrund (valfritt, nyckelordet fill).

Bilden "skärs upp" i bitar på följande sätt: för värdet slice anges ett till fyra värden. Låt oss gå igenom det med ett exempel. Låt oss anta att följande värden anges: 10 20 30 40 (pixlar px anges inte, detta beror på att bilden kan vara både raster- och vektorbaserad). Värdena säger följande: 10 skär av uppifrån, 20 skär av till höger, 30 skär av underifrån, 40 skär av till vänster. Vilken del av bilden hamnar i det vänstra övre hörnet? Det blir biten: 10 uppifrån, 40 till vänster. I det högra övre hörnet hamnar 10 uppifrån, 20 till höger. Och så vidare.

Oftast är bilden symmetrisk (som romberna ovan) och vi behöver skära av lika stora bitar för hörnen. I så fall anges ett värde, som kommer att sätta samma avstånd från alla sidor. För att skära av de orange romberna, sätter vi slice till 26 (eftersom den orange romben har storleken 26px med 26px). De gula romberna hamnar på linjerna i ramen och med dem kommer följande att hända: de kommer antingen att sträckas ut över hela blocket eller att upprepas längs ramen (beror på värdet 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 tillåter inte att ange elementets rambredd. Webbläsaren sträcker helt enkelt ut bilden längs ramen med den befintliga bredden. Därför måste den sättas via egenskapen border.

Användare med äldre webbläsare (eller med avstängda bilder) kommer att se en standardram, satt i border, så det är vettigt att sätta lämplig stil och färg på den.

Värden

Värde	Beskrivning
url(Sökväg till bild)	Sökväg till bilden. Se mer detaljerat `border-image-source`.
offset	Talar om för webbläsaren vilka delar av bilden som ska gå till hörnen, och vilka som ska gå till sidorna (och vilken del som blir den centrala). Möjliga värden: från `1` till `4` tal \| från `1` till `4` procent. Genom mellanslag kan nyckelordet `fill` sättas utöver tal eller procent. Se mer detaljerat `border-image-slice`.
bredd	Egenskapen styr bredden på den synliga delen av ramen, skalar den. Om detta värde är större än bredden på `border-width`, kommer bilden på ramen att krypa in under innehållet. Möjliga värden: CSS-enheter \| procent \| tal \| `auto`. Se mer detaljerat `border-image-width`.
utskjutning	Intressant egenskap som låter dig flytta ramen utanför elementet. Negativa värden stöds inte. Möjliga värden: CSS-enheter (förutom % (?)) \| positivt tal \| auto. Se mer detaljerat `border-image-outset`.
upprepning	Anger hur bilden ska upprepas på ramarna (inte på hörnen): mosaiklägga eller sträcka ut. Möjliga värden: `stretch` \| `repeat` \| `round` \| `space`. Se mer detaljerat `border-image-repeat`.

Standardvärde: none 100%/1/0 stretch (url(sökväg till bild) offset/bredd/utskjutning upprepning).

Exempel . border-image-repeat: värdet 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;
}

Exempel . border-image-repeat: värdet 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;
}

Exempel . border-image-repeat: värdet round

Just nu är i normalt tillstånd inställt värde repeat, och vid hovring - round. Lägg märke till att före hovring i ramen ryms det inte ett helt antal romber, men efter hovring - ett helt antal. Så fungerar 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;
}

Exempel . border-image-repeat: två ord

Värde repeat för bredd och stretch för höjd:

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

Exempel . Överensstämmelse mellan bildens bredd och ramens bredd

Låt oss öka border-width vid hovring med musen, samtidigt som vi lämnar tjockleken på border-image oförändrad. Romberna kommer att sträckas ut över hela ramen:

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

Exempel . border-image-slice

Låt oss ta en annan bild, där de olika bitarna inte är lika:

Låt oss ange vilka delar av bilden som ska skäras av - 25% 30% 10% 20%. Det fungerar så här: 25% - avstånd uppifrån, 30% - avstånd till höger, 10% - avstånd underifrån, 20% - avstånd till vänster. I grund och botten skär vi av hörnen med dessa bitar. Det övre vänstra hörnet blir 25% från bildens övre kant, och 20% från vänster kant. Det övre högra hörnet blir 25% från bildens övre kant, och 30% från höger kant, och så vidare.

Om du även hovrar med musen över blocket, så aktiveras nyckelordet fill, och den centrala delen av bilden blir bakgrunden i vårt block:

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

Exempel

Låt oss skapa en gradientram med hjälp av en linjä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;
}

Exempel . border-image-width

Låt oss sätta värdet border-image-width till 2 (bilden på ramen blir 2 gånger större än själva ramen) vid hovring med musen över elementet (26/2 - angavs efter snedstreck, medan 26 är värdet för border-image-slice). Lägg märke till att själva ramen inte ökade, men bilden på ramen - gjorde det, eftersom den kommer att krypa in under texten:

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

Exempel . border-image-outset

Låt oss sätta värdet border-image-outset till 3 vid hovring med musen över elementet. (26/1/2 - angavs efter det andra snedstrecket, medan 26 är värdet för border-image-slice, och - 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 även

egenskapen border-image-source,
som sätter sökvägen till bilden för ramen
egenskapen border-image-slice,
som sätter uppdelningen av bilden för ramen
egenskapen border-image-repeat,
som sätter upprepningen av bilden för ramen
egenskapen border-image-width,
som sätter storleken på bilden för ramen
egenskapen border-image-outset,
som sätter förskjutningen av bilden för ramen