border-image ගුණය

border-image ගුණය මායිමක් සඳහා පින්තූරයක් සකස් කරයි, එය border-image-source, border-image-slice, border-image-repeat, border-image-width සහ border-image-outset ගුණ සඳහා කෙටි යෙදුම් ගුණයකි. මෙම කෙටි යෙදුම් ගුණය CSS හි එම ගුණවලට පෙර දිස්වූ නිසා පැරණි බ්‍රවුසර ගණනාවක දී එයට සහාය ඇත.

වාග් රීතිය

තේරුම් ගන්නා යන්ත්‍රය {
	border-image: url(පින්තූරයට මාර්ගය) මාරුව/පළල/විස්ථාපනය පුනරාවර්තනය;
}

විස්තරය

අපි මායිම සඳහා යොදා ගැනීමට අවශ්‍ය පින්තූරය විශේෂිත ආකාරයකින් සැකසිය යුතුය: කොන් සඳහා 4 කුඩා පින්තූර සහ පැති සඳහා 4 පින්තූර. එවැනි පින්තූරයක උදාහරණය:

මෙම අවස්ථාවේදී, මධ්‍යම කොටස සුදු ලෙස තබා ඇත (එය මූලද්‍රව්‍යයේ පසුබිම මත වැටෙනු අප නොවේ). පිරවූ මධ්‍යම කොටසක් සහිත පින්තූරයක උදාහරණය:

slice අගය බ්‍රවුසරයට දක්වන්නේ පින්තූරයේ කුමන කොටස් කොන් සඳහා යන්නේද, කුමන කොටස් පැති සඳහාද (සහ මධ්‍යම කොටස කුමක්ද යන්න). කොන් සඳහා 4 කොටස් යයි, පැති සඳහා 4 කොටස් යයි සහ එක් කොටසක් (මධ්‍යම) මූලද්‍රව්‍යයේ පසුබිම මත යයි (විකල්පයක්, fill යන යතුරු වචනය).

පින්තූරය "කැබලි කිරීම" සිදුවන්නේ පහත ආකාරයටය: slice අගය සඳහා එක් සිට හතර දක්වා අගයන් දක්වා ඇත. අපි උදාහරණයක් මත බලමු. පහත අගයන් දක්වා ඇතැයි සිතමු: 10 20 30 40 (පික්සල් px දක්වන්නේ නැත, මෙයට හේතුව පින්තූරය රාස්ටර් හෝ දෛශික විය හැකිය). අගයන් පහත දේ පවසයි: 10 ඉහලින් කපන්න, 20 දකුණින් කපන්න, 30 පහළින් කපන්න, 40 වම්පසින් කපන්න. පින්තූරයේ කුමන කොටස වම් ඉහළ කොනට යාවිද? එය වනුයේ: ඉහලින් 10, වම්පසින් 40 වන කැබලිය. දකුණු ඉහළ කොනට යනු ඉහලින් 10, දකුණින් 20 වේ. එසේම වෙනත් අය සඳහා.

බොහෝ විට පින්තූරය සමමිතික වේ (ඉහත දම්වැල් වැනි) සහ අපට කොන් සඳහා සමාන කැබලි කපා ගැනීමට අවශ්‍යය. එවිට එක් අගයක් දක්වනු ලැබේ, එය සියලු පැතිවලින් සමාන මාරුවක් සකස් කරයි. තැඹිලි දම්වැල් කපා ගැනීමට, අපි slice 26 වශයෙන් දක්වන්නෙමු (තැඹිලි දම්වැලේ ප්‍රමාණය 26px 26px වන බැවින්). කහ දම්වැල් මායිම් රේඛා මත වැටෙනු ඇත සහ ඒවා සමඟ පහත සිදුවේ: ඒවා හෝ සම්පූර්ණ බ්ලොක් එක පුරා දිග හරියි හෝ මායිම දිගේ පුනරාවර්තනය වේ (repeat අගය මත රඳා පවතී):

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

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

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

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

border-image ගුණය ඉඩ නොදේ මූලද්‍රව්‍යයේ මායිමේ පළල දක්වන්න. බ්‍රවුසරය දැනටමත් පවතින පළල සහිත මායිම දිගේ පින්තූරය දිග හරිනු ඇත. එබැවින් එය border ගුණය හරහා සැකසිය යුතුය.

පැරණි බ්‍රවුසර (හෝ අක්‍රිය කරන ලද පින්තූර සහිත) පරිශීලකයින් border හි සැකසූ සම්මත රාමුව දකිනු ඇත, එබැවින් එයට සුදුසු ශෛලිය සහ වර්ණය සැකසීම අර්ථවත් කරයි.

අගයන්

අගය	විස්තරය
url(පින්තූරයට මාර්ගය)	පින්තූරයට මාර්ගය. වැඩි විස්තර සඳහා `border-image-source` බලන්න.
මාරුව	බ්‍රවුසරයට දක්වන්නේ පින්තූරයේ කුමන කොටස් කොන් සඳහා යන්නේද, කුමන කොටස් පැති සඳහාද (සහ මධ්‍යම කොටස කුමක්ද යන්න). හැකි අගයන්: `1` සිට `4` දක්වා අංක \| `1` සිට `4` දක්වා ප්‍රතිශත. හිස් තැනක් හරහා `fill` යතුරු වචනය අංක හෝ ප්‍රතිශත වලට අමතරව දැක්විය හැක. වැඩි විස්තර සඳහා `border-image-slice` බලන්න.
පළල	මෙම ගුණය දෘශ්‍යමාන මායිමේ පළල පාලනය කරයි, එය මාපනය කරයි. මෙම අගය `border-width` හි පළලට වඩා විශාල නම්, මායිම් පින්තූරය අන්තර්ගතය යටට ඇද යයි. හැකි අගයන්: CSS ඒකක \| ප්‍රතිශත \| අංක \| `auto`. වැඩි විස්තර සඳහා `border-image-width` බලන්න.
විස්ථාපනය	රසවත් ගුණයක්, මායිම මූලද්‍රව්‍යයෙන් පිටතට තල්ලු කිරීමට ඉඩ දෙයි. ඍණ අගයන් සහාය නොදක්වයි. හැකි අගයන්: CSS ඒකක (% හැර) \| ධන අංක \| auto. වැඩි විස්තර සඳහා `border-image-outset` බලන්න.
පුනරාවර්තනය	මායිම් මත පින්තූරය කෙසේ පුනරාවර්තනය කිරීම දක්වයි (කොන් මත නොව): පැති ගොඩගැසීම හෝ දිග හරිනය. හැකි අගයන්: `stretch` \| `repeat` \| `round` \| `space`. වැඩි විස්තර සඳහා `border-image-repeat` බලන්න.

පෙරනිමි අගය: none 100%/1/0 stretch (url(පින්තූරයට මාර්ගය) මාරුව/පළල/විස්ථාපනය පුනරාවර්තනය).

උදාහරණය . border-image-repeat: repeat අගය

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

උදාහරණය . border-image-repeat: stretch අගය

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

උදාහරණය . border-image-repeat: round අගය

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

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

#elem:hover {
	border-image: url("image.png") 26 round;
}
#elem {
	border-style: solid;
	border-width: 42px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

උදාහරණය . border-image-repeat: වචන දෙක

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

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

#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat stretch;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

උදාහරණය . පින්තූරයේ පළල මායිමේ පළල සමග ගැලපීම

mouse එක ගෙනයාමේදී border-width වැඩි කරමු, මේ අතරතුර border-image හි පළල එලෙසම තබමු. දම්වැල් සම්පූර්ණ මායිම පුරා දිග හරිනු ඇත:

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

#elem:hover {
	border-width: 52px;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

උදාහරණය . border-image-slice

වෙනත් පින්තූරයක් ගනිමු, එහි විවිධ කැබලි සමාන නොවේ:

පින්තූරයෙන් කුමන කොටස් කපා ගත යුතුද යන්න දක්වමු - 25% 30% 10% 20%. මෙය ක්‍රියා කරන්නේ මෙසේය: 25% - ඉහලින් මාරුව, 30% - දකුණින් මාරුව, 10% - පහළින් මාරුව, 20% - වම්පසින් මාරුව. �පූරුවෙන් මෙම කැබලි වලින් අපි කොන් කපා ගනිමු. ඉහළ වම් කොන 25% පින්තූරයේ ඉහලින්, සහ 20% වම්පසින් වේ. ඉහළ දකුණු කොන 25% පින්තූරයේ ඉහලින්, සහ 30% දකුණින් වේ එසේම අනෙකුත් අය සඳහා.

එසේම, ඔබ mouse එක බ්ලොක් එක මත ගෙනයන්නේ නම් fill යතුරු වචනය ක්‍රියාත්මක වනු ඇත, සහ මධ්‍යම කොටස අපගේ බ්ලොක් එකේ පසුබිම බවට පත්වේ:

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

#elem:hover {
	border-image: url("image.png") fill 25% 30% 10% 20% stretch;
}
#elem {
	border-style: solid;
	border-width: 52px;
	border-image: url("image.png") 25% 30% 10% 20% stretch;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

උදාහරණය

රේඛීය ප්‍රස්ථාරණය භාවිතයෙන් ප්‍රස්ථාරණ මායිමක් සාදමු:

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

#elem {
	background: green;
	border-image: linear-gradient(to bottom, red, blue) 30;
	border-width: 30px;
	border-style: solid;
	width: 200px;
	height: 200px;
	margin: 0 auto;
}

උදාහරණය . border-image-width

border-image-width අගය 2 වශයෙන් සකසමු (මායිම් පින්තූරය 2 ගුණයකින් විශාල වනු ඇත) mouse එක මූලද්‍රව්‍යය මත ගෙනයාමේදී (26/2 - කප්පියෙන් පසු දක්වා ඇත, මේ අතරතුර 26 - මෙය border-image-slice අගය වේ). මායිම ම ප්‍රමාණය වැඩි නොවූ අතර මායිම් පින්තූරය වැඩි වූ බව සලකන්න, එය පෙළ යටට ඇද යනු ඇත:

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

#elem:hover {
	border-image: url("image.png") 26/2 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

උදාහරණය . border-image-outset

border-image-outset අගය 3 වශයෙන් සකසමු mouse එක මූලද්‍රව්‍යය මත ගෙනයාමේදී. (26/1/2 - දෙවන කප්පියෙන් පසු දක්වා ඇත, මේ අතරතුර 26 - මෙය border-image-slice අගය වේ, සහ - 1 - border-image-width අගය වේ):

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

#elem:hover {
	border-image: url("image.png") 26/1/3 repeat;
}
#elem {
	border-style: solid;
	border-width: 26px;
	border-image: url("image.png") 26 repeat;
	width: 200px;
	height: 200px;
	background: green;
	margin: 0 auto;
}

මෙයද බලන්න

border-image-source ගුණය,
මායිම සඳහා පින්තූරයට මාර්ගය සකසයි
border-image-slice ගුණය,
මායිම සඳහා පින්තූරය කැබලි කිරීම සකසයි
border-image-repeat ගුණය,
මායිම සඳහා පින්තූරය පුනරාවර්තනය කිරීම සකසයි
border-image-width ගුණය,
මායිම සඳහා පින්තූරයේ ප්‍රමාණය සකසයි
border-image-outset ගුණය,
මායිම සඳහා පින්තූරයේ විස්ථාපනය සකසයි