Border-image-slice häsiýeti
border-image-slice häsiýeti
brauzere, suratyň haýsy bölekleriniň burçlara,
haýsylarynyň bolsa gapdallara gitjekdigini (we haýsy bölegiň
merkezi boljakdygyny) görkezýär. Burçlara 4
bölek, gapdallara 4 bölek we bir
bölek (merkezi) elementuň
fonyna gitjek (islegli, fill açar sözi).
Giňişleýin maglumat üçin
border-image
häsiýetine serediň.
Sintaksis
1-den 4-e çenli san | 1-den 4-e çenli göterim;
}
<-css->
Sanlar we göterimler bilen birlikde bosluk arkaly
fill açar sözi hem ýazylýar.
Görnüşleri
| Görnüşi | Düşündiriş |
|---|---|
| göterim | Göterimler suratyň ölçegine garaşly hasaplanýar. Goňşy göterimler ini göre, dik göterimler bolsa beýiklige göre. |
| sanlar | Sanlar - piksel (raster surat üçin) ýa-da koordinatalar (wektor surat üçin). Ölçeg birlikleri görkezilmeýär. |
fill |
Adaty ýörelge, suratyň merkezi böleginiň
taşlanyjakdygyny öz içine alýar. Ony ulanylmak üçin,
sanlara ýa-da göterimlere goşmaça
fill açar sözini ulanmaly.
|
Parametrleriň sany
Çyzgysy 1, 2,
3 ýa-da 4 parametr alyp biler. Diňe bir
ýatdan çykarmaň, çyzgynyň üçin
ölçeg birlikleri ýazylmaýar (meselem, diňe 20,
20px däl). Şeýle hem çyzgyny % bilen görkezip bolýar.
| Parametrleriň sany | Düşündiriş |
|---|---|
1 |
Hemme tarap üçin bir wagtyň özünde çyzgy. |
2 |
1 2; - ýokarky we aşak üçin 1px, çep we sag üçin 2px. |
3 |
1 2 3; - ýokarky üçin 1px, çep we sag üçin 2px, aşak üçin 3px. |
4 |
1 2 3 4; - ýokarky üçin 1px, sag üçin 2px, aşak üçin 3px, çep üçin 4px. |
Adaty bahasy: 100%(?).
Mysal
<div id="elem"></div>
#elem {
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;
}
:
Mysal
<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;
}
:
Şeýle-de serediň
-
border-imagehäsiýeti,
syýahat serheti üçin gysgaldyş -
border-image-sourcehäsiýeti,
syýahat serheti üçin suratyň ýoluny görkezýär -
border-image-repeathäsiýeti,
syýahat serheti üçin suratyň gaýtalanmagy -
border-image-widthhäsiýeti,
syýahat serheti üçin suratyň ölçegini görkezýär -
border-image-outsethäsiýeti,
syýahat serheti üçin suratyň çyzgysyny görkezýär