CSS Border-image

Svojstvo CSS border je prilično poznato. Ovim svojstvom možete definisati boju, stil i širinu border-a elementa.

Svojstvo border-image, s druge strane, omogućava vam da definišete gradijent ili sliku za obrub.

Svojstvo border-image-je skraćenica za sledeće:

• Border-image-source - izvor slike,
• Border-image-slice - definiše dimenzije rezanja izvorne slike na regione,
• Border-image-width - definiše širinu granične slike,
• Border-image-outset - definiše udaljenost od granične slike do ivice elementa,
• Border-image-repeat - definiše kako se slika ponavlja kako bi se popunilo područje granice.

Kada se koristi ova skraćenica, ako je neka od vrednosti izostavljena, njena vrednost će biti postavljena na početnu.

Sintaksa

Kada koristite svojstvo border-image, možete bilo gde od jedne do svih pet prethodno pomenutih vrednosti.

Pogledajmo sintaksu. Koristićemo stenografsko svojstvo.

.box  {
  border-image:  
      url(‘images/border.png’)       /* source */
      27 /                          /* slice */
      12px 5px 15px 20px /         /* width */
      5px 12px 17px 22px          /* outset */
      round                      /* repeat */
}

Primeri

Pokažimo primere kada želite da gradijent koristite kao obrub ili sliku kao obrub.

Pravljenje Border-a ponavljajuće slike

Slika koju ćemo koristiti prilikom kreiranja obruba je sledeća:

HTML

<div class=”box”></div>

CSS

.box {
  width: 200px;
  background-color: #000;
  border: 50px solid #DE31ED;
  margin: 10%;
  padding: 10px;

  border-image:
      url("../images/border.png")    /* source */
      50 /                           /* slice */
      25px /                         /* width  */
      12px                           /* outset */
      round                          /* repeat */

Rezultat:

Pravljenje Border-a Gradijenta

Koristićemo isti element okvira kao u prethodnom primeru, samo što će CSS biti drugačiji.

CSS

.box {
  width: 200px;
  height: 200px;
  background-color: #000;
  border: 20px solid transparent;
  padding: 10px;
  margin: 10%;

  border-image: repeating-linear-gradient(60deg, #DE31ED, #31E2ED 50px) 20;
}

Rezultat:

Kompatibilnost pretraživača

Najbolji način da vidite kakva je kompatibilnost svojstva je da pogledate uslugu CanIUse.

Ovde vidimo da je kompatibilnost uglavnom dobra. Postoji nekoliko problema sa border-image-repeat: space u Chrome-u, pa biste trebali biti u potrazi za tim.

Zaključak

Iako se retko koristi, svojstvo border-image je prilično zanimljivo. To može doneti jedinstvenu dimenziju vašem dizajnu. Najbolji način da vidite šta vam odgovara je da se poigrate svojstvom i otključate njen puni potencijal!

Hvala vam za čitanje!