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

বৈশিষ্ট্য border-image-width দৃশ্যমান বর্ডারের প্রস্থ নিয়ন্ত্রণ করে, এটিকে স্কেল করে। যদি এই মান border-width এর চেয়ে বেশি হয়, বর্ডার ইমেজ কন্টেন্টের নিচে চলে যাবে।

আরও বিস্তারিত তথ্যের জন্য বৈশিষ্ট্য border-image দেখুন।

সিনট্যাক্স

সিলেক্টর {
	border-image-width: CSS একক | শতাংশ | সংখ্যা | auto;
}

মানসমূহ

মান	বর্ণনা
CSS একক	CSS একক এ মান।
শতাংশ	বর্ডার যুক্ত ব্লকের আকারের সাপেক্ষে শতাংশ মান।
সংখ্যা	সংখ্যাগত মান, যা দ্বারা `border-width` কে গুণ করা হয়।
`auto`	কীওয়ার্ড। যদি এটি সেট করা হয়, মান সংশ্লিষ্ট `border-image-slice` এর সমান হয়। যদি উপযুক্ত আকার না থাকে, তবে `border-width` এর মান ব্যবহার করা হয়, এই ক্ষেত্রে ইমেজ কন্টেন্টের নিচে যাওয়ার সাথে সাথে বর্ডারের সম্পূর্ণ কোণ পূরণ করে। ভাল বোঝার জন্য উদাহরণ দেখুন।

ডিফল্ট মান: 1।

উদাহরণ . সংখ্যা

এলিমেন্টে মাউস নেওয়ার সময় border-image-width এর মান 2 সেট করি। এই ক্ষেত্রে বর্ডারের আকার হবে 26px*2 - border-width এ নির্ধারিত এর প্রস্থের চেয়ে 2 গুণ বেশি। বর্ডার এই ক্ষেত্রে টেক্সটের নিচে চলে যাবে (পটভূমির মতো):

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

উদাহরণ . border-image-repeat কে round এ পরিবর্তন করুন

পূর্ববর্তী উদাহরণে, মাউস নেওয়ার সময় বর্ডারে রম্বসের পূর্ণসংখ্যা সংখ্যা থাকবে না। এটি ঠিক করতে border-image-repeat round মানে সেট করুন:

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

উদাহরণ . শতাংশ

এলিমেন্টে মাউস নেওয়ার সময় border-image-width এর মান 50% সেট করি। এই ক্ষেত্রে বর্ডারের আকার হবে ব্লকের আকারের 50% (অর্থাৎ ডান এবং বাম দুটি বর্ডার সম্পূর্ণ ব্লকটি Cover করে ফেলবে):

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

উদাহরণ . শতাংশ

এলিমেন্টে মাউস নেওয়ার সময় border-image-width এর মান 30% সেট করি। এই ক্ষেত্রে বর্ডারের আকার হবে ব্লকের আকারের 30%:

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

উদাহরণ . পিক্সেল

এলিমেন্টে মাউস নেওয়ার সময় border-image-width এর মান 50px সেট করি:

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

উদাহরণ . মান auto

এলিমেন্টে মাউস নেওয়ার সময় border-image-width এর মান auto সেট করি।

মাউস নেওয়ার আগে border-image-width এর মান 1 (ডিফল্ট)। উদাহরণে ইচ্ছাকৃতভাবে border-width 52px এ সেট করা হয়েছে, এবং border-image-slice - 26 মানে (auto এর প্রভাব শুধুমাত্র তখনই দেখা যাবে যদি border-width border-image-slice এর সমান না হয়)। যেহেতু border-image-width এর মান 1, বর্ডার ইমেজ border-width এর সম্পূর্ণ প্রস্থ দখল করবে, অর্থাৎ 52px পর্যন্ত প্রসারিত হবে। মাউস নেওয়ার সময় border-image-width এর মান auto এ সেট হবে এবং ইমেজের প্রস্থ border-image-slice এর মানের সমান হবে, অর্থাৎ 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;
}

আরও দেখুন

বৈশিষ্ট্য border-image,
যা বর্ডার-ইমেজের জন্য সংক্ষিপ্ত রূপ
বৈশিষ্ট্য border-image-source,
যা বর্ডারের জন্য ইমেজের পথ নির্দেশ করে
বৈশিষ্ট্য border-image-slice,
যা বর্ডারের জন্য ইমেজ的分割 (স্লাইস) নির্দেশ করে
বৈশিষ্ট্য border-image-repeat,
যা বর্ডারের জন্য ইমেজের পুনরাবৃত্তি নির্দেশ করে
বৈশিষ্ট্য border-image-outset,
যা বর্ডারের জন্য ইমেজের সরণ নির্দেশ করে