Border-image-ominaisuus

Ominaisuus border-image asettaa kuvan reunuksen, se on lyhenne-ominaisuus ominaisuuksille border-image-source, border-image-slice, border-image-repeat, border-image-width ja border-image-outset. Samalla lyhenne-ominaisuus ilmestyi CSS:ään aikaisemmin kuin lyhennetyt ominaisuudet ja siksi sitä tuetaan suuremmassa määrässä vanhoja selaimia.

Syntaksi

valitsija {
	border-image: url(kuvan polku) siirto/paksuus/offset toisto;
}

Kuvaus

Kuva, jonka haluamme käyttää reunuksen, on oltava muotoiltu erityisellä tavalla: 4 minikuvaa kulmia varten ja 4 kuvaa sivuille. Esimerkki tällaisesta kuvasta:

Tässä tapauksessa keskiosa on jätetty valkoiseksi (koska emme halua sen päätyvän elementin taustalle). Esimerkki kuvasta täytetty keskiosalla:

Arvo slice kertoo selaimelle, mitä osia kuvasta menee kulmiin, ja mitkä sivuille (ja mikä osa on keskeinen). Kulmiin menevät 4 osaa, sivuille menevät 4 osaa ja yksi osa (keskeinen) mennään elementin taustalle (valinnaisesti, avainsana fill).

Kuva "leikataan" palasiksi seuraavalla tavalla: arvolle slice määritetään yhdestä neljään arvoa. Katsotaanpa esimerkkiä. Oletetaan, että on määritetty seuraavat arvot: 10 20 30 40 (pikseliä px ei määritetä, tämä johtuu siitä, että kuva voi olla sekä rasteri- että vektori). Arvot kertovat seuraavaa: 10 leikata ylhäältä, 20 leikata oikealta, 30 leikata alhaalta, 40 leikata vasemmalta. Mikä osa kuvasta päätyy vasempaan yläkulmaan? Se on pala: 10 ylhäältä, 40 vasemmalta. Oikeaan yläkulmaan päätyy 10 ylhäältä, 20 oikealta. Ja niin edelleen.

Useimmiten kuva on symmetrinen (kuten yllä olevat rombit) ja meidän on leikattava yhtä suuret palat kulmiin. Tässä tapauksessa määritetään yksi arvo, joka asettaa samat siirrot kaikilta puolilta. Leikataksesi oranssit rombit, määritämme slice arvoksi 26 (koska oranssin rombin koko on 26px kertaa 26px). Keltaiset rombit päätyvät reuna- viivoille ja niille tapahtuu seuraavaa: ne joko venytetään koko lohkon mitaksi tai toistetaan reunaa pitkin (riippuu arvosta repeat):

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: stretch;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

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

#elem {
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-image-repeat: repeat;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Ominaisuus border-image ei salli elementin reunan paksuuden määrittämistä. Selain yksinkertaisesti venyttää kuvan reunaa pitkin jo olevalla leveydellä. Siksi se on asettava ominaisuuden border kautta.

Vanhojen selainten käyttäjät (tai poistetuilla kuvilla) näkevät vakiokehyksen, joka on asetettu kohteessa border, joten on järkevää antaa sille sopivat tyyli ja väri.

Arvot

Arvo	Kuvaus
url(Kuvan polku)	Polku kuvaan. Katso tarkemmin `border-image-source`.
siirto	Kertoo selaimelle, mitkä osat kuvasta menevät kulmiin, ja mitkä sivuille (ja mikä osa on keskeinen). Mahdolliset arvot: `1`:stä `4`:ään numeroa \| `1`:stä `4`:ään prosenttia. Välilyönnillä voidaan asettaa avainsana `fill` numeroiden tai prosenttien lisäksi. Katso tarkemmin `border-image-slice`.
paksuus	Ominaisuus hallitsee kehyksen näkyvän osan leveyttä, skaalaa sen. Jos tämä arvo on suurempi kuin `border-width` leveys, kehyksen kuva ryömii sisällön alle. Mahdolliset arvot: CSS-yksiköt \| prosentit \| numero \| `auto`. Katso tarkemmin `border-image-width`.
offset	Mielenkiintoinen ominaisuus, jonka avulla kehys voidaan siirtää elementin ulkopuolelle. Negatiivisia arvoja ei tueta. Mahdolliset arvot: CSS-yksiköt (paitsi % (?)) \| positiivinen numero \| auto. Katso tarkemmin `border-image-outset`.
toisto	Määrittää, kuinka kuvasta toistetaan reunoilla (ei kulmissa): laatoitetaan vai venytetään. Mahdolliset arvot: `stretch` \| `repeat` \| `round` \| `space`. Katso tarkemmin `border-image-repeat`.

Oletusarvo: none 100%/1/0 stretch (url(kuvan polku) siirto/paksuus/offset toisto).

Esimerkki . border-image-repeat: arvo repeat

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esimerkki . border-image-repeat: arvo stretch

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esimerkki . border-image-repeat: arvo round

Nykyisessä normaalitilassa on asetettu arvo repeat, ja kohdistettaessa - round. Huomaa, että ennen kohdistamista reunaan mahtuu ei-kokonaisluku määrä rombeja, ja kohdistuksen jälkeen - kokonaisluku. Näin round toimii:

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

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esimerkki . border-image-repeat: kaksi sanaa

Arvo repeat leveydelle ja stretch korkeudelle:

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esimerkki . Kuvan leveyden ja reunan leveyden yhteensopivuus

Suurennamme border-width kohdistettaessa hiirellä, samalla paksuuden border-image jätetään samaksi. Rombit venyvät koko reunan mitaksi:

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

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esimerkki . border-image-slice

Otetaan toinen kuva, jossa eri palat eivät ole yhtä suuria:

Määritetään, mitkä osat kuvasta on leikattava - 25% 30% 10% 20%. Se toimii näin: 25% - yläreunan siirros, 30% - siirros oikealta, 10% - siirros alhaalta, 20% - siirros vasemmalta. Pohjimmiltaan näillä palasilla leikkaamme kulmat. Vasen yläkulma on 25% kuvan yläosasta, ja 20% vasemmalta. Oikea yläkulma on 25% kuvan yläosasta, ja 30% oikealta ja niin edelleen.

Myös, jos kohdistat hiiren lohkoon, niin avainsana fill aktivoituu, ja keskeinen osa kuvasta tulee lohkomme taustaksi:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Esimerkki

Tehdään gradienttireunus käyttämällä lineaarista gradienttia:

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

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

Esimerkki . border-image-width

Asetetaan arvo border-image-width arvoon 2 (reunuksen kuva tulee 2 kertaa suuremmaksi kuin itse reuna) kohdistettaessa hiirellä elementtiin (26/2 - määritetty vinoviivan jälkeen, kun 26 on arvo border-image-slice). Huomaa, että itse reuna ei kasvanut, vaan reunuksen kuva - kyllä, koska se ryömii tekstin alle:

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

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Esimerkki . border-image-outset

Asetetaan arvo border-image-outset arvoon 3 kohdistettaessa hiirellä elementtiin. (26/1/2 - määritetty toisen vinoviivan jälkeen, kun 26 on arvo border-image-slice, ja - 1 - border-image-width):

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

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

Katso myös

ominaisuus border-image-source,
joka asettaa polun kuvaan reunusta varten
ominaisuus border-image-slice,
joka asettaa kuvan jakamisen reunusta varten
ominaisuus border-image-repeat,
joka asettaa kuvan toiston reunusta varten
ominaisuus border-image-width,
joka asettaa kuvan koon reunusta varten
ominaisuus border-image-outset,
joka asettaa kuvan siirron reunusta varten