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

Właściwość border-image-repeat ustawia sposób powtarzania wewnętrznej części obramowania w postaci obrazka. Aby uzyskać bardziej szczegółowe informacje zobacz właściwość border-image.

Składnia

cssselektor {
  border-image-repeat: stretch | repeat | round;
}

Wartości

Wartość domyślna: stretch.

Liczba parametrów

Może przyjmować 1 lub 2 parametry. Jeśli podane są dwa parametry, to pierwszy z nich będzie dla górnej i dolnej granicy, a drugi parametr - dla lewej i prawej.

Przykład . Wartość stretch

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

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

Результат:

Przykład . Wartość repeat

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

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

Результат:

Przykład . Wartość round

Teraz w normalnym stanie ustawiona jest wartość repeat, a po najechaniu - round. Zwróć uwagę, że przed najechaniem w obramowanie mieści się niecałkowita liczba rombów, a po najechaniu - całkowita. Tak działa round:

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

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

Результат:

Przykład . Dwa słowa

Wartość repeat dla szerokości i stretch dla wysokości:

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

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

Результат:

Zobacz też