Egenskaben border-image

Egenskaben border-image angiver et billede til rammen, det er en sammentrukken egenskab for egenskaberne border-image-source, border-image-slice, border-image-repeat, border-image-width og border-image-outset. Den sammentrukne egenskab dukkede op i CSS tidligere end de sammentrukne egenskaber og derfor understøttes den i et større antal ældre browsere.

Syntaks

selektor {
	border-image: url(sti til billedet) offset/bredde/udskydelse gentagelse;
}

Beskrivelse

Billedet, som vi vil anvende til rammen, skal være udformet på en speciel måde: 4 mini billeder til hjørnerne og 4 billeder til siderne. Eksempel på et sådant billede:

I dette tilfælde er den centrale del efterladt hvid (da vi ikke ønsker, at den skal komme på baggrunden af elementet). Eksempel på billede med udfyldt central del:

Værdien slice fortæller browseren, hvilke dele af billedet der skal gå til hjørnerne, og hvilke der skal gå til siderne (og hvilken del der skal være central). 4 dele går til hjørnerne, 4 dele går til siderne og en del (den centrale) går til baggrunden for elementet (valgfrit, nøgleordet fill).

Billedet "skæres" i stykker på følgende måde: for værdien slice angives én til fire værdier. Lad os gennemgå det med et eksempel. Antag at følgende værdier er angivet: 10 20 30 40 (pixels px angives ikke, dette skyldes, at billedet kan være både raster og vektor). Værdierne fortæller følgende: 10 skær af øverst, 20 skær af til højre, 30 skær af nederst, 40 skær af til venstre. Hvilken del af billedet kommer i det venstre øverste hjørne? Det vil være stykket: 10 øverst, 40 til venstre. I det højre øverste hjørne kommer 10 øverst, 20 til højre. Og så videre.

Oftest er billedet symmetrisk (som romberne ovenfor) og vi skal skære lige store stykker af til hjørnerne. I så fald angives én værdi, som vil angive ens afstande fra alle sider. For at skære de orange romber ud, angiver vi slice til 26 (da den orange rombe har en størrelse på 26px gange 26px). De gule romber vil komme på linjerne i rammen og følgende vil ske med dem: de vil enten strækkes over hele blokken eller blive gentaget langs rammen (afhængigt af værdien 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;
}

Egenskaben border-image tillader ikke at angive tykkelsen af elementets ramme. Browseren strækker simpelthen billedet langs rammen med den allerede eksisterende bredde. Derfor skal den angives via egenskaben border.

Brugere af ældre browsere (eller med deaktiverede billeder) vil se en standardramme, angivet i border, så det giver mening at give den passende stil og farve.

Værdier

Værdi	Beskrivelse
url(Sti til billedet)	Sti til billedet. Se mere under `border-image-source`.
offset	Fortæller browseren, hvilke dele af billedet der skal gå til hjørner, og hvilke der skal gå til sider (og hvilken del der skal være central). Mulige værdier: fra `1` til `4` tal \| fra `1` til `4` procenter. Der kan angives nøgleordet `fill` gennem mellemrum ud over tal eller procenter. Se mere under `border-image-slice`.
bredde	Egenskaben styrer bredden af den synlige del af rammen, skalerer den. Hvis denne værdi er større end bredden af `border-width`, vil billedet af rammen krybe ind under indholdet. Mulige værdier: CSS enheder \| procenter \| tal \| `auto`. Se mere under `border-image-width`.
udskydelse	Interessant egenskab, der giver mulighed for at flytte rammen uden for elementet. Negative værdier understøttes ikke. Mulige værdier: CSS enheder (undtagen % (?)) \| positivt tal \| auto. Se mere under `border-image-outset`.
gentagelse	Angiver, hvordan billedet skal gentages på rammerne (ikke på hjørnerne): fliselagt eller strækket. Mulige værdier: `stretch` \| `repeat` \| `round` \| `space`. Se mere under `border-image-repeat`.

Standardværdi: none 100%/1/0 stretch (url(sti til billedet) offset/bredde/udskydelse gentagelse).

Eksempel . border-image-repeat: værdien 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: værdien 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: værdien round

Lige nu er værdien repeat indstillet som standard, og ved hover - round. Læg mærke til at før hover passer der ikke et helt antal romber ind i rammen, men efter hover - gør der. Sådan virker 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

Værdien repeat for bredden og stretch for højden:

<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 . Overensstemmelse mellem billedets bredde og rammens bredde

Vi øger border-width ved hover med musen, mens tykkelsen af border-image forbliver den samme. Romberne vil strækkes over hele rammen:

<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

Lad os tage et andet billede, hvor de forskellige stykker ikke er ens:

Vi angiver, hvilke dele af billedet der skal skæres af - 25% 30% 10% 20%. Det virker sådan her: 25% - afstand ovenfra, 30% - afstand til højre, 10% - afstand nedenfra, 20% - afstand til venstre. I bund og grund skærer vi med disse stykker hjørnerne ud. Det øverste venstre hjørne vil være 25% fra toppen af billedet, og 20% fra venstre. Det øverste højre hjørne vil være 25% fra toppen af billedet, og 30% fra højre og så videre.

Hvis du også holder musen over blokken, vil nøgleordet fill træde i kraft, og den centrale del af billedet vil blive baggrunden for vores 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;
}

Eksempel

Lad os lave en gradientramme ved hjælp af en 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

Vi indstiller værdien af border-image-width til 2 (billedet af rammen vil blive 2 gange stoørre end rammen selv) ved hover med musen over elementet (26/2 - angivet efter skråstreg, hvor 26 er værdien af border-image-slice). Læg mærke til, at rammen selv ikke er blevet større, men billedet af rammen - er blevet det, da det vil kravle ind 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

Vi indstiller værdien af border-image-outset til 3 ved hover med musen over elementet. (26/1/2 - angivet efter den anden skråstreg, hvor 26 er værdien af 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å

egenskaben border-image-source,
som angiver stien til billedet for rammen
egenskaben border-image-slice,
som angiver opdelingen af billedet for rammen
egenskaben border-image-repeat,
som angiver gentagelsen af billedet for rammen
egenskaben border-image-width,
som angiver størrelsen på billedet for rammen
egenskaben border-image-outset,
som angiver forskydningen af billedet for rammen