Vlastnost border-image-width

Vlastnost border-image-width řídí šířku viditelné části ohraničení, mění její měřítko. Pokud je tato hodnota větší než šířka border-width, obrázek ohraničení vleze pod obsah.

Pro podrobnější informace viz vlastnost border-image.

Syntaxe

cssselektor {
  border-image-width: CSS jednotky | procenta | číslo | auto;
}

Hodnoty

Výchozí hodnota: 1.

Příklad . Číslo

Nastavme hodnotu border-image-width na 2 při najetí myší na element. Přitom ohraničení bude mít velikost 26px*2 - 2 krát větší, než je jeho šířka nastavená v border-width. Ohraničení přitom vleze pod text (jako druh pozadí):

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

Результат:

Příklad . Změňme border-image-repeat na round

V předchozím příkladu bude při najetí v ohraničení necelý počet kosočtverců. Opravme to nastavením border-image-repeat na hodnotu 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;
}

Результат:

Příklad . Procenta

Nastavme hodnotu border-image-width na 50% při najetí myší na element. Přitom ohraničení bude mít velikost 50% od velikosti bloku (to znamená, že dvě ohraničení, pravé a levé, pokryjí celý 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;
}

Результат:

Příklad . Procenta

Nastavme hodnotu border-image-width na 30% při najetí myší na element. Přitom ohraničení bude mít velikost 30% od velikosti bloku:

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

Результат:

Příklad . Pixely

Nastavme hodnotu border-image-width na 50px při najetí myší na element:

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

Результат:

Příklad . Hodnota auto

Nastavme hodnotu border-image-width na auto při najetí myší na element.

Před najetím má border-image-width hodnotu 1 (ve výchozím nastavení). V příkladu je speciálně border-width nastaveno na 52px, a border-image-slice - na hodnotě 26 (efekt s auto bude pozorován pouze pokud border-width není rovno border-image-slice). Kvůli tomu, že border-image-width má hodnotu 1, obrázek ohraničení bude zabírat celou šířku border-width, to znamená, že se roztáhne na 52px. Při najetí se hodnota border-image-width nastaví na auto a šířka obrázku se bude rovnat hodnotě border-image-slice, tedy 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;
}

Результат:

Viz také