CSS হল ছবি

CSS হল ছবি

CSS ব্যবহার করে border-image বৈশিষ্ট্য, যা চিত্রকে উপাদান চারপাশের সীমানা হিসাবে সংযোজন করতে দেয়

CSS border-image বৈশিষ্ট্য

CSS border-image বৈশিষ্ট্যটি আপনাকে সাধারণ সীমানা বরাবর ব্যবহারকৃত চিত্রকে নির্দিষ্ট করতে দেয়

এই বৈশিষ্ট্যটি তিনটি অংশ নিয়ে গঠিত

  • সীমানা হিসাবে ব্যবহার করা চিত্র
  • চিত্রকে কোথায় কাটা হবে
  • নির্দিষ্ট করুন যেখানে চিত্রকে পুনরায় করা হবে বা সম্প্রসারিত করা হবে

আমরা এই চিত্রটি ("border.png") ব্যবহার করবো

border-image বৈশিষ্ট্যটি চিত্রকে গ্রহণ করে, এবং তা চাকুর মতো দড়িত করে, যেহেতু আপনার নির্দেশ অনুযায়ী পুনরায় করা হবে বা সম্প্রসারিত করা হবে

দৃষ্টান্ত:যাতে border-image কার্যকর, এই উপাদানটিকে সংযোজন করতে হবে border বৈশিষ্ট্য!

এখানে, চিত্রের মধ্যস্থ অংশকে পুনরায় করে সীমানা তৈরি করা হয়:

চিত্রকে সীমানা হিসাবে ব্যবহার করা

এটি কোডঃ

উদাহরণ

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

আপনার হাতে পরীক্ষা করুন

এখানে, চিত্রের মধ্যস্থ অংশকে সীমানা হিসাবে সম্প্রসারিত করা হয়:

চিত্রকে সীমানা হিসাবে ব্যবহার করা

এটি কোডঃ

উদাহরণ

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

আপনার হাতে পরীক্ষা করুন

সুঝানা:border-image বৈশিষ্ট্যটি বাস্তবে নিম্নলিখিত বৈশিষ্ট্যগুলির সংক্ষিপ্ত বৈশিষ্ট্য

  • border-image-source
  • border-image-slice
  • border-image-width
  • border-image-outset
  • border-image-repeat

CSS border-image - ভিন্ন কাটা মাত্রা

ভিন্ন কাটা মাত্রাগুলি সীমানার দৃশ্যকৌশলকে সম্পূর্ণভাবে পরিবর্তন করবে:

উদাহরণ 1:

border-image: url(border.png) 50 round;

উদাহরণ 2:

border-image: url(border.png) 20% round;

উদাহরণ 3:

border-image: url(border.png) 30% round;

এটি কোডঃ

উদাহরণ

#borderimg1 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 50 round;
}
#borderimg2 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 20% round;
}
#borderimg3 {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30% round;
}

আপনার হাতে পরীক্ষা করুন

CSS সীমানা চিত্র বৈশিষ্ট্য

বৈশিষ্ট্য বর্ণনা
border-image সকল border-image-* বৈশিষ্ট্যগুলির জন্য সংক্ষিপ্ত বৈশিষ্ট্য
border-image-source নির্দিষ্ট হল একটি চিত্রকে সীমানা হিসাবে ব্যবহার করা পথ
border-image-slice 规定如何裁切边框图像。
border-image-width 规定边框图像的宽度。
border-image-outset 规定边框图像区域超出边框盒的量。
border-image-repeat 规定边框图像应重复、圆角、还是拉伸。