Grænsebillede - CSS-tricks | CSS Almanak 2025

border-image er en stenografisk egenskab, der lader dig bruge et billede eller CSS-gradient som grænsen for et element.

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

Den border-imageegenskab kan anvendes på ethvert element, undtagen interne tabelelementer (f.eks st, th, td), når border-collapseer indstillet til collapse.

Ejendomme

Den eneste nødvendige ejendom til border-imagestenografi er border-image-source. De andre egenskaber er standard til deres oprindelige værdier, hvis de ikke er specificeret. Disse er border-imageegenskaberne i rækkefølge:

`border-image-source`

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

Denne egenskab angiver kilden til kantbilledet. Dette kan være en URL, data URI, CSS-gradient eller inline SVG (selvom support er begrænset til inline SVG, se SVG-brugsanvisninger).

Den oprindelige værdi er none.

`border-image-slice`

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

Værdierne for denne egenskab fortæller browseren, hvor billedet skal "opdeles" for at oprette grænsestykker. Billedet er opdelt i 9 sektioner - de fire hjørner, de fire sider og midten.

Otte hjerter i et "rammebillede", forstørret til at vise detaljer. De røde streger angiver skiver.

Hvis du synes, det lyder uhyggeligt, er du i godt selskab. Der var en lang diskussion af emnet på Eric Myers blog for et par år siden, hvor mange frontend-udviklingsstørrelser vejede ind.

I denne demo gentager et hjerte omkring div-grænsen. Den border-image-sourceBilledet er et sammensat billede af otte af de samme hjerteikon, skåret således at den fulde hjerte form anvendes på hver side af elementet.

Se demo-grænsebilleddemoen: ikongrænse af CSS-Tricks (@ css-tricks) på CodePen.

Flere brugsnoter

Skønt understøttelse af border-imageer forbedret - det understøttes ikke forudfastsat i alle aktuelle browserversioner - det borderer stadig umagen værd at indstille en reservestil . Din reservekant vises i browsere, der ikke understøtter border-image, eller hvis billedet ikke indlæses.

I modsætning til nogle af de andre grænsegenskaber border-imagekan de ikke animeres. Det kan heller ikke designes med border-radius.

Hvis du erklærer en border-image-sourceog en borderbredde eller border-image-widthuden nogen skiver, placeres hele det ikke-skårne billede i elementets fire hjørner, skaleret til din specificerede bredde.

Relaterede

border
border-collapse
box-sizing

Mere information

border-image i CSS baggrunds- og grænsemodul niveau 3 CR
border-image ved MDN
border-image.com, dette værktøj giver dig mulighed for at uploade et billede og lege med grænseskiverne, indtil du får dem rigtige, så genererer det CSS til dig.
Grænsebillede forklaret fra Dudley Storey.

Flere demonstrationer

Også fra Dudley Storey, Praktisk border-image: responsiv billedramme, en CodePen-demo. Dette er et godt eksempel på at bruge et rammebillede fornuftigt på et lydhørt billede. Bemærk, at "rammen" fjernes i mindre skærmstørrelser.
Ægte prikkede grænser ved hjælp af SVG og border-image, en pen af Lucas Lemonnier. En løsning til den grimme firkantede "prikkede" kant, denne metode giver dig rigtige runde prikker!
gradient-knap, en pen fra CodePen-bruger GSSxGSS. Et smukt eksempel på en lineær gradient som et kantbillede.
Film Strip, en pen af Nick Pettit. Måske ikke den mest praktiske demo, dette er et sjovt, kunstigt eksempel på hvad du kan gøre med border-image.

Browsersupport

border-imageoprindeligt krævede leverandørpræfikser i alle browsere, der understøttede det. Nu fungerer det upræfast i den nyeste version af alle browsere. Denne tabel viser både den tidligste prefixede support og den tidligste unprefixed support, hvor det er relevant.