CSS reunakuvat

CSS reunakuvat

Käyttämällä CSS border-image Ominaisuus, jolla voidaan asettaa kuva toimimaan elementin reunana.

CSS border-image ominaisuus

CSS border-image Ominaisuus mahdollistaa käytettävän kuvan määrittämisen, ei tavallisen reunan ympärillä.

Ominaisuudella on kolme osaa:

  • Reunana käytettävä kuva
  • Missä kuvaa leikataan
  • Määritellään, tulisiko keskiosat toistaa vai venyttää

Käytämme tätä kuvaa ("border.png")

border-image Ominaisuus hyväksyy kuvan ja leikkaa sen yhdeksään osaan, kuten neliöpelissä. Sitten reunat asetetaan kulmiin ja keskiosat toistetaan tai venytetään asetuksen mukaan.

Huomioitavaa:Jotta border-image toimii, mutta elementin on asetettava myös border Ominaisuus!

Tässä toistetaan kuvan keskiosaa reunan luomiseksi:

Kuva toimii reunana!

Tämä on koodi:

Esimerkki

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

Kokeile itse!

Tässä kuvan keskiosaa venytetään reunan luomiseksi:

Kuva toimii reunana!

Tämä on koodi:

Esimerkki

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

Kokeile itse!

Vinkki:border-image Ominaisuus on oikeastaan seuraavien ominaisuuksien lyhyt muoto:

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

CSS border-image - eri leikkausarvot

Eri leikkausarvot muuttavat täysin reunan ulkoasun:

Esimerkki 1:

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

Esimerkki 2:

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

Esimerkki 3:

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

Tämä on koodi:

Esimerkki

#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;
}

Kokeile itse!

CSS reunakuvan ominaisuudet

Ominaisuus Kuvaus
border-image Lyhyt muoto, jolla asetetaan kaikki border-image-*-ominaisuudet.
border-image-source Määritellään reunan kuvan polku.
border-image-slice Määrittää, kuinka reunakuvaa leikataan.
border-image-width Määrittää reunakuvan leveys.
border-image-outset Määrittää, kuinka paljon reunakuvan alue ylittää reunapellin.
border-image-repeat Määrittää, tulisiko reunakuvaa toistaa, pyöristää vai venyttää.