Svojstvo border-image-width

Svojstvo border-image-width upravlja širinom vidljivog dela okvira, menja njegov razmer. Ako je ova vrednost veća od širine border-width, slika okvira će da se "uvuče" ispod sadržaja.

Za detaljnije informacije pogledajte svojstvo border-image.

Sintaksa

cssselektor {
  border-image-width: CSS jedinice | procenti | broj | auto;
}

Vrednosti

Podrazumevana vrednost: 1.

Primer . Broj

Podesimo vrednost border-image-width na 2 pri prelasku mišem preko elementa. Pri tome će okvir biti veličine 26px*2 - 2 puta veći nego što je njegova širina zadata u border-width. Okvir će pri tome da "zadje" ispod teksta (kao pozadina):

html<div id="elem"></div>

css#elem:hover {
  border-image-width: 2;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("border-image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Primer . Promenimo border-image-repeat u round

U prethodnom primeru pri prelasku mišem u okviru neće biti celobrojna količina rombića. Ispravimo to, podešavanjem border-image-repeat na vrednost round:

html<div id="elem"></div>

css#elem:hover {
  border-image-width: 2;
}
#elem {
  border-image-repeat: round;
  border-image-source: url("border-image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Primer . Procenti

Podesimo vrednost border-image-width na 50% pri prelasku mišem preko elementa. Pri tome će okvir biti veličine 50% od veličine bloka (to jest dva okvira, desni i levi, će da pokriju ceo blok):

html<div id="elem"></div>

css#elem:hover {
  border-image-width: 50%;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("border-image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Primer . Procenti

Podesimo vrednost border-image-width na 30% pri prelasku mišem preko elementa. Pri tome će okvir biti veličine 30% od veličine bloka:

html<div id="elem"></div>

css#elem:hover {
  border-image-width: 30%;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("border-image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Primer . Pikseli

Podesimo vrednost border-image-width na 50px pri prelasku mišem preko elementa:

html<div id="elem"></div>

css#elem:hover {
  border-image-width: 50px;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("border-image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 26px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Primer . Vrednost auto

Podesimo vrednost border-image-width na auto pri prelasku mišem preko elementa.

Pre prelaska border-image-width ima vrednost 1 (podrazumevano). U primeru je namerno border-width zadato na 52px, a border-image-slice - na vrednost 26 (efekat sa auto će se videti samo ako border-width nije jednako border-image-slice). Zbog toga što border-image-width ima vrednost 1, slika okvira će da zauzme celu širinu border-width, to jest rastegnuće se na 52px. Pri prelasku vrednost border-image-width će se podesiti na auto i širina slike će postati jednaka vrednosti border-image-slice, to jest 26px:

html<div id="elem"></div>

css#elem:hover {
  border-image-width: auto;
}
#elem {
  border-image-repeat: repeat;
  border-image-source: url("border-image.png");
  border-image-slice: 26;
  border-style: solid;
  border-width: 52px;
  width: 200px;
  height: 200px;
  background: green;
  margin: 0 auto;
}

Результат:

Pogledajte takođe