Właściwość border-image-width

Właściwość border-image-width kontroluje szerokość widocznej części obramowania, skaluje je. Jeśli ta wartość jest większa niż szerokość border-width, obrazek obramowania wpełźnie pod zawartość.

Dla bardziej szczegółowych informacji zobacz właściwość border-image.

Składnia

cssselektor {
  border-image-width: jednostki CSS | procenty | liczba | auto;
}

Wartości

Wartość domyślna: 1.

Przykład . Liczba

Ustawmy wartość border-image-width na 2 po najechaniu myszką na element. Wtedy obramowanie stanie się rozmiaru 26px*2 - 2 razy większe niż jego szerokość podana w border-width. Obramowanie wpełźnie wtedy pod tekst (jak tło):

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

Результат:

Przykład . Zmieniamy border-image-repeat na round

W poprzednim przykładzie po najechaniu w obramowaniu nie będzie całkowitej liczby rombów. Naprawmy to, ustawiając border-image-repeat na wartość 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;
}

Результат:

Przykład . Procenty

Ustawmy wartość border-image-width na 50% po najechaniu myszką na element. Wtedy obramowanie stanie się rozmiaru 50% od rozmiaru bloku (czyli dwa obramowania, prawe i lewe, pokryją cały 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;
}

Результат:

Przykład . Procenty

Ustawmy wartość border-image-width na 30% po najechaniu myszką na element. Wtedy obramowanie stanie się rozmiaru 30% od rozmiaru 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;
}

Результат:

Przykład . Piksele

Ustawmy wartość border-image-width na 50px po najechaniu myszką 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;
}

Результат:

Przykład . Wartość auto

Ustawmy wartość border-image-width na auto po najechaniu myszką na element.

Przed najechaniem border-image-width ma wartość 1 (domyślnie). W przykładzie celowo border-width ustawiono na 52px, a border-image-slice - na wartości 26 (efekt z auto będzie obserwowany tylko jeśli border-width nie jest równe border-image-slice). Z powodu, że border-image-width ma wartość 1, obrazek obramowania będzie zajmował całą szerokość border-width, to znaczy rozciągnie się na 52px. Po najechaniu wartość border-image-width ustawi się na auto i szerokość obrazka stanie się równa wartości border-image-slice, czyli 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;
}

Результат:

Zobacz też