Omadus border-image-repeat
Omadus border-image-repeat määrab
piiripildi sisuosa kordamise viisi. Täpsema teabe saamiseks
vaadake omadust border-image.
Süntaks
selektor {
border-image-repeat: stretch | repeat | round;
}
Väärtused
| Väärtus | Kirjeldus |
|---|---|
stretch |
Venitab piiripildi elemendi mõõtmeteni. See vaikeväärtus. |
repeat |
Kordab piiripilti. |
round |
Kordab pilti ja skaleerib seda nii, et elemendi küljele mahtuks täisarv piltidest. |
Vaikeväärtus: stretch.
Parameetrite arv
Võib võtta 1 või 2 parameetrit.
Kui on määratud kaks parameetrit, siis esimene neist
kehtib ülemise ja alumise piiri jaoks ning teine
parameeter - vasaku ja parema piiri jaoks.
Näide . Väärtus stretch
<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;
}
:
Näide . Väärtus repeat
<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;
}
:
Näide . Väärtus round
Praegu on tavaseisundis määratud
väärtus repeat, ning pealelehel -
round. Pange tähele, et enne pealelehet
ei mahu piiridesse täisarv rombe,
kuid peale pealelehet - täisarv. Nii
see round töötab:
<div id="elem"></div>
#elem:hover {
border-image-repeat: round;
}
#elem {
border-style: solid;
border-width: 42px;
border-image-source: url("image.png");
border-image-slice: 26;
border-image-repeat: repeat;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Näide . Kaks sõna
Väärtus repeat laiuse
jaoks ning stretch kõrguse jaoks:
<div id="elem"></div>
#elem {
border-image-repeat: repeat stretch;
border-image-source: url("image.png");
border-image-slice: 26;
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
Vaata ka
-
omadus
border-image,
mis on lühend piiripildi jaoks -
omadus
border-image-source,
mis määrab tee pildile piiri jaoks -
omadus
border-image-slice,
mis lõikab pildi piiri jaoks -
omadus
border-image-width,
mis määrab pildi suuruse piiri jaoks -
omadus
border-image-outset,
mis määrab pildi nihke piiri jaoks