Ominaisuus border-image-width

Ominaisuus border-image-width hallitsee reunuksen näkyvän osan leveyttä, skaalaa sitä. Jos tämä arvo on suurempi kuin border-width-ominaisuuden arvo, reunakuva ryömii sisällön alle.

Lisätietoja katso ominaisuudesta border-image.

Syntaksi

cssvalitsin {
  border-image-width: CSS-yksiköt | prosentit | luku | auto;
}

Arvot

Oletusarvo: 1.

Esimerkki . Luku

Asetetaan border-image-width-ominaisuuden arvoksi 2 kun hiiri viedään elementin päälle. Tällöin reunuksesta tulee kooltaan 26px*2 - 2 kertaa suurempi kuin sen border-width-ominaisuudessa asetettu leveys. Reunukseen tullaan kuitenkin menemään tekstin alle (ikään kuin taustaksi):

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

Результат:

Esimerkki . Muutetaan border-image-repeat arvoon round

Edellisessä esimerkässä reunuksessa ei ole kokonaismäärä timantteja. Korjataan tämä asettamalla border-image-repeat-ominaisuus arvoksi 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;
}

Результат:

Esimerkki . Prosentit

Asetetaan border-image-width-ominaisuuden arvoksi 50% kun hiiri viedään elementin päälle. Tällöin reunuksesta tulee kooltaan 50% lohkon koosta (eli kaksi reunusta, oikea ja vasen, peittävät koko lohkon):

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

Результат:

Esimerkki . Prosentit

Asetetaan border-image-width-ominaisuuden arvoksi 30% kun hiiri viedään elementin päälle. Tällöin reunuksesta tulee kooltaan 30% lohkon koosta:

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

Результат:

Esimerkki . Pikselit

Asetetaan border-image-width-ominaisuuden arvo arvoksi 50px kun hiiri viedään elementin päälle:

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

Результат:

Esimerkki . Arvo auto

Asetetaan border-image-width-ominaisuuden arvo arvoksi auto kun hiiri viedään elementin päälle.

Ennen hiiren vientiä päälle border-image-width-ominaisuuden arvo on 1 (oletus). Esimerkissä border-width-ominaisuuden arvo on tarkoituksella asetettu arvoon 52px, ja border-image-slice-ominaisuuden arvo on 26 (auto-vaikutus havaitaan vain, jos border-width-ominaisuuden arvo ei ole sama kuin border-image-slice-ominaisuuden arvo). Koska border-image-width-ominaisuuden arvo on 1, reunakuvan tulee täyttää koko border-width-ominaisuuden arvon leveys, toisin sanoen venyy 52px:iin. Hiiren viedessä päälle border-image-width-ominaisuuden arvo asetetaan arvoon auto ja kuvan leveys vastaa border-image-slice-ominaisuuden arvoa, eli 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;
}

Результат:

Katso myös