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

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

Arvot

Arvo	Kuvaus
CSS-yksiköt	Arvo annetuissa CSS-yksiköissä.
Prosentit	Arvot prosentteina suhteessa sen lohkon kokoon, jolle reuna on asetettu.
Luku	Numeerinen arvo, jolla kerrotaan `border-width`-ominaisuuden arvo.
`auto`	Avainsana. Jos se on asetettu, arvo on vastaava `border-image-slice`-ominaisuuden arvo. Jos sopivaa kokoa ei ole, käytetään `border-width`-ominaisuuden arvoa, jolloin kuva täyttää koko reunuksen kulman, ryömien sisällön alle. Katso esimerkit paremman ymmärryksen saamiseksi.

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):

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

#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:

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

#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):

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

#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:

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

#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:

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

#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:

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

#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

ominaisuus border-image,
joka on lyhenne reunakuvalle
ominaisuus border-image-source,
joka asettaa polun kuvalle reunaa varten
ominaisuus border-image-slice,
joka jakaa kuvan reunaa varten
ominaisuus border-image-repeat,
joka toistaa kuvan reunaa varten
ominaisuus border-image-outset,
joka asettaa kuvan siirron reunaa varten