বৈশিষ্ট্য 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;
}

Результат:

আরও দেখুন