box-shadow ගුණය

box-shadow ගුණය කොටුවකට සෙවනැල්ලක් නියම කරයි. ගුණයේ අගය ලෙස එය 6 පරාමිතීන්, හිස් අවකාශයකින් වෙන් වූවා, හෝ මූලික වචනය none, සෙවනැල්ල සම්පූර්ණයෙන් අවලංගු කරන, පිළිගනී.

වාක්ය රචනා ක්‍රමය

තෝරන්නා {
	box-shadow: inset x_අක්ෂයේ_සින්නුම් y_අක්ෂයේ_සින්නුම් අස්පෂ්ටතාවය සෙවනැල්ලේ_ප්‍රමාණය වර්ණය;
}

තෝරන්නා {
	box-shadow: none;
}

පරාමිතීන්

පරාමිතිය	විස්තරය
`inset`	අනිවාර්ය නොවන පරාමිතිය. එය නියම කර ඇත්නම්, සෙවනැල්ල කන්ටේනරය තුළට වනු ඇත, නියම කර නැත්නම් - පිටතට වනු ඇත.
x අක්ෂයේ සින්නුම්	X අක්ෂය දිගේ සෙවනැල්ලේ සින්නුම් නියම කරයි. ධන අගයක් දකුණට සිනින්දු කරයි, ඍණ අගයක් - වමට.
y අක්ෂයේ සින්නුම්	Y අක්ෂය දිගේ සෙවනැල්ලේ සින්නුම් නියම කරයි. ධන අගයක් පහළට සිනින්දු කරයි, ඍණ අගයක් - ඉහළට.
අස්පෂ්ටතාවය	සෙවනැල්ලේ අස්පෂ්ටතාවය නියම කරයි. අගය වැඩි වන තරමට - සෙවනැල්ල වඩාත් අස්පෂ්ට වනු ඇත. අනිවාර්ය නොවන පරාමිතිය. නියම කර නැත්නම් - සෙවනැල්ල පැහැදිලි වනු ඇත.
සෙවනැල්ලේ ප්‍රමාණය	සෙවනැල්ලේ ප්‍රමාණය නියම කරයි. ධන අගයක් සෙවනැල්ල දිගු කරයි, ඍණ අගයක්, අනෙක් අතට, එය හකුළුවයි. අනිවාර්ය නොවන පරාමිතිය. නියම කර නැත්නම් - සෙවනැල්ල මූලද්‍රව්‍යයේ ප්‍රමාණයම වනු ඇත.
වර්ණය	වර්ණය සෙවනැල්ලට වර්ණ සඳහා ඕනෑම ඒකකයකින් නියම කරයි. අනිවාර්ය නොවන පරාමිතිය. නියම කර නැත්නම් - සෙවනැල්ලේ වර්ණය පාඨයේ වර්ණය සමඟ සමපාත වේ.

අක්ෂ දිගේ සින්නුම්, අස්පෂ්ටතාවය සහ සෙවනැල්ලේ ප්‍රමාණය ප්‍රමාණ සඳහා ඕනෑම ඒකකයකින්, සියයට හැර, නියම කරනු ලැබේ.

උදාහරණය

මෙම උදාහරණයේ දී සෙවනැල්ල පහළට සහ දකුණට සිනින්දු වී ඇත සහ තරමක් අස්පෂ්ටතාවයක් එකතු කර ඇත:

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

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

උදාහරණය . පැහැදිලි සෙවනැල්ල

මෙම උදාහරණයේ දී සෙවනැල්ල පහළට සහ දකුණට සිනින්දු වී ඇත, නමුත් අස්පෂ්ටතාවයක් නොමැත (සෙවනැල්ල පැහැදිලි වනු ඇත):

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

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

උදාහරණය . සමාන සෙවනැල්ල

මෙම උදාහරණයේ දී සෙවනැල්ල සිනින්දු නොවී, නමුත් එයට අස්පෂ්ටතාවයක් එකතු කර ඇත:

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

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

උදාහරණය . සෙවනැල්ලේ ප්‍රමාණය

මෙම උදාහරණයේ දී සෙවනැල්ල සිනින්දු නොවී, අස්පෂ්ටතාවය ශුන්‍යයට සමාන වේ, නමුත් එයට ප්‍රමාණය එකතු කර ඇත (කළු - මෙය මායිම, රතු - මෙය සෙවනැල්ල):

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

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

උදාහරණය . අස්පෂ්ටතාවය + සෙවනැල්ලේ ප්‍රමාණය

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

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

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

උදාහරණය . අභ්‍යන්තර සෙවනැල්ල

මෙම උදාහරණයේ දී සෙවනැල්ල කන්ටේනරය තුළ පිහිටා ඇත:

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

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

මේවාත් බලන්න

text-shadow ගුණය,
පාඨයට සෙවනැල්ලක් නියම කරන