CSS kantbillede

CSS kantbillede

Ved at bruge CSS border-image Egenskab, der kan bruges til at sætte et billede som kant omkring et element.

CSS border-image egenskab

CSS border-image Egenskaben lader dig specificere et billede til brug, i stedet for en almindelig kant.

Egenskaben har tre dele:

  • billedet, der bruges som kant
  • hvor billedet skal klippes
  • definerer, om midterdelen skal gentages eller strækkes

Vi bruger dette billede ("border.png")

border-image Egenskaben accepterer billeder og skærer dem i ni dele, som et skakbræt. Derefter placeres hjørnerne i hjørnerne, og de midterdele, der er indstillet, gentages eller strækkes.

Bemærk:For at gøre border-image virker, skal elementet også have border Egenskab!

Her, billedets midterdel gentages for at oprette kanten:

Billedet som kant!

Her er koden:

Eksempel

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 rund;
}

Prøv det selv

Her, billedets midterdel strækkes for at oprette kanten:

Billedet som kant!

Her er koden:

Eksempel

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

Prøv det selv

Tip:border-image Egenskaben er en kortform for følgende egenskaber:

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - forskellige klipværdier

Forskellige klipværdier ændrer kantens udseende fuldstændigt:

Eksempel 1:

border-image: url(border.png) 50 rund;

Eksempel 2:

border-image: url(border.png) 20% rund;

Eksempel 3:

border-image: url(border.png) 30% rund;

Her er koden:

Eksempel

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 rund;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% rund;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% rund;
}

Prøv det selv

CSS kantbilledeegenskab

Egenskab Beskrivelse
border-image Kortform for at sætte alle border-image-* egenskaber.
border-image-source Definerer stien til billedet, der bruges som kant.
border-image-slice Bestemmer, hvordan kantbilledet skal klippes.
border-image-width Bestemmer bredden af kantbilledet.
border-image-outset Bestemmer mængden af kanten af billedet, der udgår af kanten af boksen.
border-image-repeat Bestemmer, om kanten af billedet skal gentages, runde eller strækkes.