CSS Randafbeelding

CSS Randafbeelding

Door het gebruik van CSS border-image Eigenschap die de afbeelding mogelijk maakt om als rand om het element te gebruiken.

CSS border-image eigenschap

CSS border-image De eigenschap staat u toe om een afbeelding te specificeren die wordt gebruikt in plaats van een normale rand omheen te plaatsen.

De eigenschap bestaat uit drie delen:

  • Afbeelding die wordt gebruikt als rand
  • Waar de afbeelding wordt gesneden
  • Definieer of het midden deel herhaald of uitgerekt moet worden

We zullen dit afbeelding gebruiken ("border.png")

border-image De eigenschap accepteert een afbeelding en snijd deze in negen delen, net als een schaakbord. Vervolgens worden de hoeken geplaatst op de hoeken en worden de middendelen herhaald of uitgerekt volgens de instellingen.

Let op:Om border-image werkzaam, het element moet ook border Eigenschap!

Hier wordt het midden van de afbeelding herhaald om de rand te maken:

Afbeelding als rand!

Dit is de code:

Voorbeeld

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

Probeer het zelf

Hier wordt het midden van de afbeelding uitgerekt om de rand te maken:

Afbeelding als rand!

Dit is de code:

Voorbeeld

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

Probeer het zelf

Tip:border-image De eigenschap is een verkorte vorm van de volgende eigenschappen:

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

CSS border-image - verschillende snijwaarden

Verschillende snijwaarden veranderen het uiterlijk van de rand volledig:

Voorbeeld 1:

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

Voorbeeld 2:

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

Voorbeeld 3:

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

Dit is de code:

Voorbeeld

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

Probeer het zelf

CSS randafbeeldingseigenschap

Eigenschap Beschrijving
border-image Een verkorte eigenschap voor alle border-image-* eigenschappen.
border-image-source Het pad van het afbeelding dat wordt gebruikt als rand.
border-image-slice Bepaalt hoe de randafbeelding moet worden gesneden.
border-image-width Bepaalt de breedte van de randafbeelding.
border-image-outset Bepaalt hoeveel de randafbeeldingsregio de randbalk moet overschrijden.
border-image-repeat Bepaalt hoe de randafbeelding moet worden herhaald, afgerond of uitgerekt.