Vetia border-image-repeat
Vetia border-image-repeat
përcakton se si pjesa e brendshme e një kornize
përsëritet si imazh. Për më shumë detaje,
shiko vetinë
border-image.
Sintaksa
selector {
border-image-repeat: stretch | repeat | round;
}
Vlerat
| Numri i parametrave | Përshkrimi |
|---|---|
stretch |
Shtrin një imazh kornize në madhësinë e elementit. Kjo është vlera e parazgjedhur. |
repeat |
Përsërit një imazh kornize. |
round |
Përsërit një imazh dhe e shkallëzon atë në mënyrë që të ketë një numër të plotë imazhesh në anën e elementit. |
Vlera e parazgjedhur: stretch.
Numri i parametrave
Mund të marrë 1 ose 2 parametra. Nëse jepen dy
parametra, atëherë i pari do të jetë
për kornizat e sipërme dhe të poshtme, dhe parametri i dytë
do të jetë për të majtën dhe të djathtën.
Shembull . Vlera 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;
}
:
Shembull . Vlera 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;
}
:
Shembull . Vlera round
Tani në gjendjen normale vlera është vendosur në
repeat, dhe në hover - round. Ju lutem
vini re se para hover, nuk vendoset një numër i plotë
i rombeve në kornizë, por
pas hover - një numër i plotë. Kështu
funksionon round:
<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;
}
:
Shembull . Dy vlera
Vlera repeat për gjerësinë
dhe stretch për lartësinë:
<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;
}
:
Shih gjithashtu
-
vetia
border-image
që është shkurtim për një imazh kornize -
vetia
border-image-source
që përcakton një rrugë imazhi për një kornizë -
vetia
border-image-slice
që përcakton një ndarje imazhi për një kornizë -
vetia
border-image-width
që vendos një gjerësi imazhi për një kornizë -
vetia
border-image-outset
që vendos një fillim imazhi për një kornizë