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

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

Bahalar

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:

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

css#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ň:

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

css#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):

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

css#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:

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

css#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ň:

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

css#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:

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

css#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ň