border-image-width hassaýaty

border-image-width hassaýaty görkezilýän çäginiň giňligini dolandyrýar, ony meýilleşdirýär. Eger bu baha border-width hassaýatynyň giňliginden uly bolsa, çäginiň suraty mazmunyň aşagynda ýaşrynar.

Has giňişleýin maglumat üçin border-image hassaýatyna serediň.

Sintaksis

sazlaýjy {
	border-image-width: CSS birlikleri | göterimler | san | auto;
}

Bahalar

Baha	Düşündiriş
CSS birlikleri	CSS birliklerinde kesgitlenen baha.
Göterimler	Çägi kesgitlenen blok-yň ölçegine göre göterimlerde.
San	San bahasy, `border-width` hassaýatyna köpeldilýär.
`auto`	Açar sözi. Eger kesgitlense, baha degişli `border-image-slice` hassaýatyna deň bolar. Eger laýyk ölçeg ýok bolsa, `border-width` hassaýatynyň bahasy ulanylar, şonda surat çäginiň burçunyň hemmesini doldurar we mazmunyň aşagynda ýaşrynar. Gowy düşünmek üçin mysallara serediň.

Bellenen bahasy: 1.

Mysal . San

border-image-width hassaýatynyň bahasyny elemente siçan çyzylanda 2 edeliň. Şonda çäginiň ölçegi 26px*2 bolar - border-width hassaýatynda kesgitlenen giňliginden 2 esse uly. Çäg şonda tekstiň aşagynda (fon ýaly) ýerleşer:

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

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

Mysal . border-image-repeat hassaýatyny round edeliň

Öňki mysalda siçan çyzylanynda çägde rombikleriň tutuş sany bolmaz. Muny border-image-repeat hassaýatyny round bahasynda kesgitläp düzedeliň:

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

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

Mysal . Göterimler

border-image-width hassaýatynyň bahasyny elemente siçan çyzylanda 50% edeliň. Şonda çäg blok-yň ölçeginiň 50% ölçeginde bolar (ýagny sag we çep çägler blok-yň hemmesini öz içine alar):

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

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

Mysal . Göterimler

border-image-width hassaýatynyň bahasyny elemente siçan çyzylanda 30% edeliň. Şonda çäg blok-yň ölçeginiň 30% ölçeginde bolar:

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

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

Mysal . Piksel

border-image-width hassaýatynyň bahasyny elemente siçan çyzylanda 50px edeliň:

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

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

Mysal . auto bahasy

border-image-width hassaýatynyň bahasyny elemente siçan çyzylanda auto edeliň.

Siçan çyzylanyndan öň border-image-width hassaýatynyň bahasy 1 (bellenen ýaly). Mysalda ýörite border-width hassaýaty 52px kesgitlendi, border-image-slice hassaýaty bolsa 26 bahasynda (auto effekti diňe border-width hassaýaty border-image-slice hassaýatyna deň däl bolanda görkeziler). border-image-width hassaýatynyň bahasy 1 bolany üçin, çäg suraty border-width hassaýatynyň giňliginiň hemmesini eýeler, ýagny 52px giňlikde uzaldylanda. Siçan çyzylanynda border-image-width hassaýatynyň bahasy auto edilýär we suratyň giňligi border-image-slice hassaýatynyň bahasyna deň bolar, ýagny 26px:

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

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

Şeýle-de serediň

border-image hassaýaty,
çäg-surat üçin gysga ýazgy
border-image-source hassaýaty,
çäg üçin suratyň ýoluny kesgitläýär
border-image-slice hassaýaty,
çäg üçin suraty bölümek
border-image-repeat hassaýaty,
çäg üçin suraty gaýtalamak
border-image-outset hassaýaty,
çäg üçin suraty süýşürmegi kesgitläýär