Border-image häsiýeti

border-image häsiýeti gönüburçuk üçin surat kesgitleýär, bu häsiýet ýönekeýleşdirilen häsiýet border-image-source, border-image-slice, border-image-repeat, border-image-width we border-image-outset häsiýetleri üçindir. Şol bir wagtyň özünde ýönekeýleşdirilen häsiýet CSS-de ýönekeýleşdirilýän häsiýetlerden ozal peýda bolandygy üçin köplenç köne brauzerler tarapyndan goldanylýar.

Sintaksis

selektor {
	border-image: url(surata ýol) üýtgemek/galyňlyk/hereket täkrar;
}

Düşündiriş

Gönüburçuk üçin ulanylmak isleýän surat ýörite bir görnüşde düzülmeli: burçlar üçin 4 minimal surat we taraplar üçin 4 surat. Şeýle suratyň mysaly:

Bu ýagdaýda merkezi bölüm ak galdyryldy (sebäbi onuň elementiň fonyna düşmegini islemeýäris). Doldurylan merkezi bölümi bilen suratyň mysaly:

slice bahasy brauzere, suratyň haýsy bölümleriniň burçlara, haýsylarynyň taraplara barjakdygyny (we haýsy bölümiň merkezi boljakdygyny) görkezýär. Burçlara 4 bölüm barýar, taraplara 4 bölüm barýar we bir bölüm (merkezi) elementiň fonyna barýar (içermek ýa-da içermek däl, açar söz fill).

Surat aşakdaky ýaly böleklere "bölünýär": slice bahasy üçin bir-den dörde çenli baha görkezilýär. Geliň mysal bilen düşüneliň. Aşakdaky bahalar kesgitlenen bolsun: 10 20 30 40 (piksel px görkezilmeýär, sebäbi surat rastr we wektor bolup bilýär). Bahalar aşakdakyny aňladýar: 10 ýokardan kes, 20 sagdan kes, 30 aşakdan kes, 40 çepden kes. Suratyň haýsy bölümi çep ýokarky burça düşer? Bu bölek bolar: 10 ýokardan, 40 çepden. Sag ýokarky burça 10 ýokardan, 20 sagdan düşer. We ş.m.

Köplenç surat simmetrik (ýokardaky romb ýaly) we burçlar üçin deň bölekler kesmek gerek. Şeýle ýagdaýda bir baha görkezilýär, ol hemme taraplardan deň üýtgemeleri kesgitleýär. Mämişi romblary kesmek üçin biz slice 26 görkezeris (sebäbi mämişi romb ölçegine eýe 26px 26px). Sary romblar gönüburçuň çyzyklaryna düşer we olar bilen aşakdaky bolýar: olar ýa-da butin bloga çenli uzalýar ýa-da gönüburçuk boýunca gaýtalanýar (repeat bahasyna bagly):

<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;
}

border-image häsiýeti element gönüburçugynyň gallyňlygyny görkezmäge rugsat bermeýär. Brauzer diňe suraty eýýäm bar bolan giňişlik bilen gönüburçuk boýunca uzaldýar. Şonuň üçin ony border häsiýeti arkaly kesgitlemeli.

Köne brauzer ulanyjylary (ýa-da suratlar öçürilen) border-de kesgitlenen standart çägni görerler, şonuň üçin oňa gabat gelýän stil we reňk kesgitlemek aňladýar.

Bahalar

Baha	Düşündiriş
url(Surata ýol)	Surata ýol. Giňişleýin maglumat üçin `border-image-source`-a serediň.
üýtgemek	Brauzere, suratyň haýsy bölümleriniň burçlara barjakdygyny, haýsylarynyň taraplara barjakdygyny (we haýsy bölümiň merkezi boljakdygyny) görkezýär. Mümkin bolan bahalar: `1`-den `4`-e çenli sanlar \| `1`-den `4`-e çenli göterimler. Boşluk arkaly açar söz `fill` sanlar ýa-da göterimler bilen goşmaça görkezilip bilner. Giňişleýin maglumat üçin `border-image-slice`-a serediň.
galyňlyk	Häsiýet görnüşli çägüň giňişligini dolandyrýar, ony massştablaşdyrýar. Eger bu baha `border-width` giňişliginden uly bolsa, gönüburçuk suraty mazmunyň aşagyna süýşer. Mümkin bolan bahalar: CSS birlikleri \| göterimler \| san \| `auto`. Giňişleýin maglumat üçin `border-image-width`-a serediň.
hereket	Gyzýan häsiýet, çägüň elementden daşary çykmasyna mümkinçilik berýär. Teris bahalar goldanmaýar. Mümkin bolan bahalar: CSS birlikleri (% (?) başga) \| kesgitli san \| auto. Giňişleýin maglumat üçin `border-image-outset`-a serediň.
täkrar	Gönüburçuklarda (burçlarda däl) suratyň nähili gaýtalanjakdygyny görkezýär: plitalamak ýa-da uzaltmak. Mümkin bolan bahalar: `stretch` \| `repeat` \| `round` \| `space`. Giňişleýin maglumat üçin `border-image-repeat`-a serediň.

Belli däl bahasy: none 100%/1/0 stretch (url(surata ýol) üýtgemek/galyňlyk/hereket täkrar).

Mysal . border-image-repeat: repeat bahasy

<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;
}

Mysal . border-image-repeat: stretch bahasy

<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;
}

Mysal . border-image-repeat: round bahasy

Häzirki wagtda adaty ýagdaýda repeat bahasy, eliň geçirmekde - round bahasy kesgitlendi. El çekmezden ozal gönüburçuga butin bolmadyk sany romb goýulýandygyna, el çekmezden soňra - butin. round şeýle işleýär:

<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;
}

Mysal . border-image-repeat: iki söz

repeat bahasy giňişlik üçin we stretch bahasy beýiklik üçin:

<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;
}

Mysal . Suratyň giňişliginiň gönüburçuk giňişligine gabat gelmegi

border-width-y eliň geçirmekde artdyrarys, şol bir wagtyň özünde border-image gallyňlygyny şeýle galdyrarys. Romblar butin gönüburçuň üstüne uzalar:

<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;
}

Mysal . border-image-slice

Başga bir suraty alyň, onda dürli bölekler deň däl:

Suratyň haýsy bölümlerini kesmeli - 25% 30% 10% 20%. Işleýiş şeýle: 25% - ýokardan üýtgemek, 30% - sagdan üýtgemek, 10% - aşakdan üýtgemek, 20% - çepden üýtgemek. Esasan, bu bölekler bilen biz burçlary kesýäris. Ýokarky çep burç 25% suratyň ýokarsyndan, we 20% çepinden bolar. Ýokarky sag burç 25% suratyň ýokarsyndan, we 30% sagyndan bolar we ş.m.

Şeýle-de, eger eliňizi bloga geçirseniz, açar söz fill işjeňleşer, we merkezi bölüm suratyň fonu biziň blogymyzyň fonyna öwrüler:

<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;
}

Mysal

çyzyk gradienti arkaly gradient gönüburçuk düzeliň:

<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;
}

Mysal . border-image-width

border-image-width bahasyny 2 (gönüburçuk suraty 2 esse öz gönüburçugyndan uly bolar) elemente eliň geçirmekde kesgitleýäris (26/2 - göni çyzyktan soňra görkezildi, şol bir wagtyň özünde 26 - bu border-image-slice bahasy). Özüňize serediň, gönüburçuk artmady, ýöne gönüburçuk suraty - hawa, sebäbi ol tekstüň aşagyna süýşer:

<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;
}

Mysal . border-image-outset

border-image-outset bahasyny 3 elemente eliň geçirmekde kesgitleýäris. (26/1/2 - ikinji göni çyzyktan soňra görkezildi, şol bir wagtyň özünde 26 - bu border-image-slice bahasy, a - 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;
}

Şeýle-de serediň

häsiýet border-image-source,
gönüburçuk üçin surata ýol kesgitleýär
häsiýet border-image-slice,
gönüburçuk üçin suraty bölmek kesgitleýär
häsiýet border-image-repeat,
gönüburçuk üçin suratyň gaýtalanmagyny kesgitleýär
häsiýet border-image-width,
gönüburçuk üçin suratyň ölçegini kesgitleýär
häsiýet border-image-outset,
gönüburçuk üçin suratyň üýtgemegini kesgitleýär