border-image-repeat ගුණය

border-image-repeat ගුණය පින්තූරයක් ලෙස සීමාවේ අභ්‍යන්තර කොටස පුනරාවර්තනය කරන ආකාරය සකසයි. වඩාත් විස්තරාත්මක තොරතුරු සඳහා border-image ගුණය බලන්න.

වාක්‍ය රීතිය

cssතෝරන්නා {
  border-image-repeat: stretch | repeat | round;
}

අගයන්

පෙරනිමි අගය: stretch.

පරාමිති ගණන

1 හෝ 2 පරාමිති ගත හැක. පරාමිති දෙකක් ලබා දී තිබේ නම්, පළමු එක ඉහළ සහ පහළ සීමාව සඳහා වන අතර දෙවන පරාමිතිය - වම් සහ දකුණු සීමාව සඳහා වේ.

උදාහරණය . stretch අගය

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

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

Результат:

උදාහරණය . repeat අගය

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

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

Результат:

උදාහරණය . round අගය

දැන් සාමාන්‍ය තත්වයේ සකසා ඇත්තේ repeat අගය වන අතර, සුළු පහරක් ලැබුන විට - round වේ. සුළු පහරක් ලැබීමට පෙර සීමාවට සම්පූර්ණ නොවන ගණනක් රොම්බස් ගැලපෙන අතර සුළු පහරක් ලැබීමෙන් පසු - සම්පූර්ණ ගණනක් ගැලපේ. එසේම round ක්‍රියා කරයි:

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

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

Результат:

උදාහරණය . වචන දෙකක්

පළල සඳහා repeat අගය සහ උස සඳහා stretch අගය:

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

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

Результат:

මෙයද බලන්න