Egenskapen border-image-width

Egenskapen border-image-width styr bredden på kantens synliga del, skalar den. Om detta värde är större än bredden på border-width, kommer kantbilden att krypa in under innehållet.

För mer detaljerad information, se egenskapen border-image.

Syntax

cssselektor {
  border-image-width: CSS-enheter | procent | nummer | auto;
}

Värden

Standardvärde: 1.

Exempel . Nummer

Sätt värdet på border-image-width till 2 när musen hovrar över elementet. Därmed blir kanten storleken 26px*2 - 2 gånger större än dess bredd, angiven i border-width. Kanten kommer då att gå in under texten (som en typ av bakgrund):

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

Результат:

Exempel . Ändra border-image-repeat till round

I föregående exempel kommer det inte att finnas ett helt antal rutor i kanten vid hovring. Vi åtgärdar detta genom att sätta border-image-repeat till värdet 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;
}

Результат:

Exempel . Procent

Sätt värdet på border-image-width till 50% när musen hovrar över elementet. Därmed blir kanten storleken 50% av blockets storlek (det vill säga de två kanterna, höger och vänster, kommer att täcka hela blocket):

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

Результат:

Exempel . Procent

Sätt värdet på border-image-width till 30% när musen hovrar över elementet. Därmed blir kanten storleken 30% av blockets storlek:

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

Результат:

Exempel . Pixlar

Sätt värdet på border-image-width till 50px när musen hovrar över elementet:

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

Результат:

Exempel . Värdet auto

Sätt värdet på border-image-width till auto när musen hovrar över elementet.

Innan hovring har border-image-width värdet 1 (standard). I exemplet är border-width specifikt satt till 52px, och border-image-slice - till värdet 26 (effekten med auto observeras endast om border-width inte är lika med border-image-slice). På grund av att border-image-width har värdet 1, kommer kantbilden att uppta hela bredden på border-width, det vill säga sträckas ut över 52px. Vid hovring sätts värdet på border-image-width till auto och bildens bredd blir lika med värdet border-image-slice, det vill säga 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;
}

Результат:

Se även