CSS-kantbild

CSS-kantbild

Genom att använda CSS border-image Egenskap som kan användas för att ställa in en bild som ram runt ett element.

CSS border-image egenskap

CSS border-image Egenskapen låter dig specificera vilken bild som används, istället för en vanlig ram.

Egenskapen har tre delar:

  • bild som används som ram
  • var bildklippning sker
  • definiera om mitten delen ska upprepas eller sträckas

Vi kommer att använda denna bild ("border.png")

border-image Egenskapen accepterar bilder och delar dem i nio delar, som ett schackbräde. Sedan placeras hörnen vid hörnen och de mittersta delarna upprepas eller sträcks enligt dina inställningar.

Observera:För att göra border-image verkar, elementet behöver också ställa in border Egenskap!

Här upprepas bilden i mitten för att skapa ramen:

Bilden som används som ram!

Detta är koden:

Exempel

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

Prova själv

Här sträcks bilden i mitten för att skapa ramen:

Bilden som används som ram!

Detta är koden:

Exempel

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

Prova själv

Tips:border-image Egenskapen är en förkortning av följande egenskaper:

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

CSS border-image - olika klippvärden

Olika klippvärden kan helt förändra ramens utseende:

Exempel 1:

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

Exempel 2:

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

Exempel 3:

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

Detta är koden:

Exempel

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

Prova själv

CSS-ramimageegenskaper

Egenskap Beskrivning
border-image En förkortningsproperty för att ställa in alla border-image-*-egenskaper.
border-image-source Definierar sökvägen till bilden som används som ram.
border-image-slice Definiera hur gränsbindestillningen ska klippas.
border-image-width Definiera bredden på gränsbindestillningen.
border-image-outset Definiera mängden som gränsbindestillningen överskrider ramboxen.
border-image-repeat Definiera hur gränsbindestillningen ska upprepas, vara avrundad eller sträcka ut.