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 වනු ඇත - 2 ඊට සකසා ඇති පළල, border-width වලින් සකසා ඇති පළලට වඩා ගුණයකින් වැඩිය. මෙයින් මායිම පෙළ යටට යනු ඇත (පසුබිමක් ලෙස):

<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% කොටසේ ප්‍රමාණයට සමාන වනු ඇත (එනම් දකුණු හා වම් මායිම් දෙක, කොටස මුලුමනින්ම ආවරණය කරනු ඇත):

<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 ගුණය,
මායිම සඳහා පින්තූරයේ මාරුව සකසයි