Eigenschaft border-image-width

Die Eigenschaft border-image-width steuert die Breite des sichtbaren Teils des Rahmens, skaliert ihn. Wenn dieser Wert größer ist als die Breite von border-width, wird das Rahmenbild unter den Inhalt kriechen.

Für weitere Informationen siehe die Eigenschaft border-image.

Syntax

cssSelektor {
  border-image-width: CSS-Einheiten | Prozent | Zahl | auto;
}

Werte

Standardwert: 1.

Beispiel . Zahl

Setzen Sie den Wert border-image-width auf 2 beim Mouseover über das Element. Dabei wird der Rahmen auf die Größe 26px*2 - auf 2 Mal größer als seine in border-width festgelegte Breite. Der Rahmen wird dabei unter den Text kriechen (wie ein Hintergrund):

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

Результат:

Beispiel . Ändern von border-image-repeat auf round

Im vorherigen Beispiel wird sich beim Mouseover im Rahmen keine ganze Anzahl von Rauten befinden. Korrigieren wir dies, indem wir border-image-repeat auf den Wert round setzen:

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

Результат:

Beispiel . Prozent

Setzen Sie den Wert border-image-width auf 50% beim Mouseover über das Element. Dabei wird der Rahmen auf die Größe 50% der Größe des Blocks (also zwei Rahmen, der rechte und der linke, werden den gesamten Block abdecken):

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

Результат:

Beispiel . Prozent

Setzen Sie den Wert border-image-width auf 30% beim Mouseover über das Element. Dabei wird der Rahmen auf die Größe 30% der Größe des Blocks:

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

Результат:

Beispiel . Pixel

Setzen Sie den Wert border-image-width auf 50px beim Mouseover über das 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;
}

Результат:

Beispiel . Wert auto

Setzen Sie den Wert border-image-width auf auto beim Mouseover über das Element.

Vor dem Mouseover hat border-image-width den Wert 1 (standardmäßig). Im Beispiel wurde speziell border-width auf 52px gesetzt, und border-image-slice - auf den Wert 26 (der Effekt mit auto wird nur beobachtet, wenn border-width nicht gleich border-image-slice ist). Da border-image-width den Wert 1 hat, wird das Rahmenbild die gesamte Breite von border-width einnehmen, also sich auf 52px strecken. Beim Mouseover wird der Wert border-image-width auf auto gesetzt und die Bildbreite wird gleich dem Wert border-image-slice, also 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;
}

Результат:

Siehe auch