A border-image-width tulajdonság

A border-image-width tulajdonság a szegény látható részének szélességét vezérli, méretezi azt. Ha ez az érték nagyobb, mint a border-width szélessége, a szegény képe a tartalom alá mászik.

Részletesebb információkért lásd a border-image tulajdonságot.

Szintaxis

cssszelektor {
  border-image-width: CSS egység | százalék | szám | auto;
}

Értékek

Alapértelmezett érték: 1.

Példa . Szám

Állítsuk a border-image-width értékét 2-re amikor az egérmutató az elem fölé kerül. Ekkor a szegény mérete 26px*2 lesz - 2 ször nagyobb, mint a border-width-ban megadott szélessége. Eközben a szegény a szöveg alá kerül (mint a háttér):

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élda . Változtassuk a border-image-repeat értékét round-ra

Az előző példában az egérmutató fölévitelkor a szegényben nem egész számú rombusz lesz. Javítsuk ezt úgy, hogy a border-image-repeat értékét round-ra állítjuk:

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élda . Százalék

Állítsuk a border-image-width értékét 50%-ra amikor az egérmutató az elem fölé kerül. Ekkor a szegény mérete 50% lesz a blokk méretéhez képest (vagyis a két szegény, a jobb és a bal, magába foglalja az egész blokkot):

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élda . Százalék

Állítsuk a border-image-width értékét 30%-ra amikor az egérmutató az elem fölé kerül. Ekkor a szegény mérete 30% lesz a blokk méretéhez képest:

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élda . Pixelek

Állítsuk a border-image-width értékét 50px-ra amikor az egérmutató az elem fölé kerül:

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élda . Auto érték

Állítsuk a border-image-width értékét auto-ra amikor az egérmutató az elem fölé kerül.

Az egérmutató fölévitel előtt a border-image-width értéke 1 (alapértelmezés szerint). A példában szándékosan a border-width értéke 52px, a border-image-slice értéke pedig 26 (az auto hatás csak akkor figyelhető meg, ha a border-width nem egyenlő a border-image-slice értékével). Mivel a border-image-width értéke 1, a szegény képe a border-width teljes szélességét fogja kitölteni, azaz 52px-ra nyúlik. Az egérmutató fölévitelével a border-image-width értéke auto-ra vált, és a kép szélessége egyenlő lesz a border-image-slice értékével, azaz 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;
}

Результат:

Lásd még