border-image-source ගුණය
border-image-source ගුණය
දාරය සඳහා රූපයක් සකසයි. වැඩි විස්තර සඳහා
border-image ගුණය බලන්න.
වාක්ය රචනය
තෝරන්නා {
border-image-source: url(රූපයේ මාර්ගය);
}
නිදර්ශනය
border-image-source ගුණය
border-image-slice ගුණය සමඟ එක්ව සකසන්න:
<div id="elem"></div>
#elem {
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;
}
:
නිදර්ශනය
border-image-slice ගුණය සකසා නොමැති නම්,
සම්පූර්ණ රූපය කෙළවරට යයි (මන්දයි border-image-slice
ගුණයේ පෙරනිමි අගය 100% වන බැවින්):
<div id="elem"></div>
#elem {
border-image-source: url("image.png");
border-style: solid;
border-width: 26px;
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
}
:
නිදර්ශනය
රූපයක් වෙනුවට රේඛීය වර්ණාවලියක් සැකසිය හැක:
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-image-slice: 30;
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
නිදර්ශනය
border-image-slice ගුණය සකසා නොමැති නම්,
වර්ණාවලිය කෙළවරට යයි (මන්දයි border-image-slice
ගුණයේ පෙරනිමි අගය 100% වන බැවින්):
<div id="elem"></div>
#elem {
border-image-source: linear-gradient(to bottom, red, blue);
border-width: 30px;
border-style: solid;
background: green;
height: 200px;
width: 200px;
margin: 0 auto;
}
:
නිදර්ශනය
border-radius ගුණය සකසන්නේ නම්,
දාරය වටවීම, අවාසනාවකට මෙන්, සිදු නොවේ
(වර්ණාවලිය සමඟත්), එසේ වුවද ආචරණය
සිත්ගන්නා සුළු වනු ඇත:
<div id="elem"></div>
#elem {
border-radius: 100px;
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;
}
:
මෙයත් බලන්න
-
border-imageගුණය,
දාර-රූපය සඳහා කෙටි ආකාරය වේ -
border-image-sliceගුණය,
දාර රූපය කපා දැමීමයි -
border-image-repeatගුණය,
දාර රූපය පුනරාවර්තනය කිරීමයි -
border-image-widthගුණය,
දාර රූපයේ ප්රමාණය සකසයි -
border-image-outsetගුණය,
දාර රූපයේ ස්ථාන විස්ථාපනය සකසයි
