Border-afbeelding - CSS-trucs

border-image is een afgekorte eigenschap waarmee u een afbeelding of CSS-verloop als rand van een element kunt gebruiken.

.module ( border-image: url(border.png.webp) 25 25 round; )

De border-imageeigenschap kan op elk element worden toegepast, behalve interne tabelelementen (bijv. Tr, th, td) wanneer border-collapseis ingesteld op collapse.

Eigendommen

De enige vereiste eigenschap voor de border-imagesteno is border-image-source. De andere eigenschappen gebruiken standaard hun oorspronkelijke waarden als ze niet zijn opgegeven. Dit zijn de border-imageeigenschappen op volgorde:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Deze eigenschap specificeert de bron voor de randafbeelding. Dit kan een URL, gegevens-URI, CSS-verloop of inline SVG zijn (hoewel de ondersteuning voor inline SVG beperkt is, zie opmerkingen over SVG-gebruik).

De oorspronkelijke waarde is none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

De waarden van deze eigenschap vertellen de browser waar de afbeelding moet worden "gesneden" om de stukken van de rand te maken. De afbeelding is verdeeld in 9 secties: de vier hoeken, de vier zijden en het midden.

Acht harten in een "frame" -afbeelding, vergroot om details te tonen. De rode lijnen geven plakjes aan.

Als je denkt dat dat belachelijk klinkt, ben je in goed gezelschap. Er was een paar jaar geleden een lange discussie over het onderwerp op de blog van Eric Myer, waar veel frontend-ontwikkelaars meewogen.

In deze demo herhaalt een hart zich rond de rand van de div. De border-image-sourceafbeelding is een samengestelde afbeelding van acht van hetzelfde hartpictogram, in plakjes gesneden zodat de volledige hartvorm aan elke kant van het element wordt gebruikt.

Zie de demo van Pen border-image: icon border door CSS-Tricks (@ css-tricks) op CodePen.

Meer gebruiksopmerkingen

Hoewel de ondersteuning voor border-imageis verbeterd - het wordt zonder prefix ondersteund in alle huidige browserversies - is het instellen van een fallback- borderstijl nog steeds de moeite waard. Uw reservekader wordt weergegeven in browsers die dit niet ondersteunen border-imageof als de afbeelding niet kan worden geladen.

In tegenstelling tot sommige andere randeigenschappen, border-imagekan deze niet worden geanimeerd. Het kan ook niet worden gestyled met border-radius.

Als u een border-image-sourceen een borderbreedte of border-image-widthzonder plakjes declareert, wordt de volledige ongesneden afbeelding op de vier hoeken van het element geplaatst, geschaald naar de door u opgegeven breedte.

Verwant

border
border-collapse
box-sizing

Meer informatie

border-image in de CSS Background and Borders Module Level 3 CR
border-image bij MDN
border-image.com, met deze tool kun je een afbeelding uploaden en met de randplakken spelen totdat je ze goed hebt, waarna het de CSS voor je genereert.
Border Image uitgelegd van Dudley Storey.

Meer demo's

Ook van Dudley Storey, Practical border-image: responsive picture frame, een CodePen demo. Dit is een goed voorbeeld van het verstandig gebruiken van een randafbeelding op een responsieve afbeelding. Merk op dat het "frame" wordt verwijderd bij kleinere schermformaten.
Echte gestippelde randen met SVG en randafbeelding, een pen van Lucas Lemonnier. Een oplossing voor de lelijke vierkante "gestippelde" rand, deze methode geeft je echte ronde stippen!
verloopknop, een pen van CodePen-gebruiker GSSxGSS. Een mooi voorbeeld van een lineair verloop als randafbeelding.
Filmstrip, een pen van Nick Pettit. Misschien niet de meest praktische demo, dit is een leuk, kunstzinnig voorbeeld van wat je ermee kunt doen border-image.

Browser-ondersteuning

border-imageoorspronkelijk vereiste leveranciersvoorvoegsels in alle browsers die dit ondersteunden. Nu werkt het zonder prefix in de nieuwste versie van alle browsers. Deze tabel toont zowel de vroegste vooraf vastgestelde ondersteuning als de vroegste niet-vooraf vastgestelde ondersteuning, indien van toepassing.