repeating-linear-gradient ශ්රිතය

repeating-linear-gradient ශ්රිතය අනුලක්ෂිත රේඛීය පැතිරීමක් නිර්වචනය කරයි. මෙයින් අදහස් වන්නේ අපි පැතිරීමේ නිශ්චිත රටාවක් නිර්වචනය කරන බවයි, උදාහරණයක් ලෙස, 0px සිට 10px දක්වා - රතු පාට සිට නිල් පාටට පැතිරීම සහ මෙම පැතිරීම බ්ලොක් එක මුලුමනින්ම පුනරාවර්තනය වේ: 0px සිට 10px දක්වා, 10px සිට 20px දක්වා, 20px සිට 30px දක්වා සහ එයම කරගෙන යයි.

මෙම ශ්රිතය යොදනු ලබන්නේ, පසුබිම් පින්තූරය නිර්වචනය කරන ගුණාංග සඳහා: background, background-image හෝ සීමාවේ පින්තූරය: border-image, background-image-source.

වාක්‍ය රචනය

තේරීම {
	background: repeating-linear-gradient([දිශාව], වර්ණ1 ප්‍රමාණය1, වර්ණ2 ප්‍රමාණය2...);
}

අගයන්

අගය	විස්තරය
දිශාව	ඕනෑම කෝණ සඳහා ඒකක වලින් හෝ මූල පද වලින් පැතිරීමේ නිශ්චිත දිශාවක් නිර්වචනය කරයි: `top`, `left`, `right`, `bottom` හෝ ඒවායේ සංයෝජනයෙන්. පද වල අනුපිළිවෙල වැදගත් නොවේ. පරාමිතිය අනිවාර්ය නොවේ: එය නොලියන්නේ නම්, පැතිරීම ඉහල සිට පහලට යනු ඇත. දිශාවට පෙර `to` යන පදය යෙදේ.
කෝණය	ඕනෑම කෝණ සඳහා ඒකක වලින් කෝණය. ධන හෝ ඍණ විය හැකිය. පරාමිතිය අනිවාර්ය නොවේ. එකවර කෝණයක් හෝ දිශාවක් නිර්වචනය කළ හැකිය (හෝ කිසිවක් නැතිව).
වර්ණ1	ඕනෑම වර්ණ සඳහා ඒකක වලින් පැතිරීමේ ආරම්භක වර්ණය.
වර්ණ2	ඕනෑම වර්ණ සඳහා ඒකක වලින් පැතිරීමේ අවසාන වර්ණය.
ප්‍රමාණය	ඕනෑම ප්‍රමාණ සඳහා ඒකක වලින් පැතිරීමේ නිශ්චිත වර්ණයක විහිදුම නිර්වචනය කරයි.

උදාහරණය . සරලම ප්‍රභේදය

පැතිරීම මෙලෙස දිස්වනු ඇත: 0px සිට 20px දක්වා හිස් රතු පාට, 20px සිට 40px දක්වා - රතු පාට සිට නිල් පාටට පැතිරීම. එය ඉහළ සිට පහළට පුනරාවර්තනය වේ (එය අනුලක්ෂිත පැතිරීමක් වන බැවින්):

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

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

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

පැතිරීම මෙලෙස දිස්වනු ඇත: 0px සිට 20px දක්වා හිස් රතු පාට, 20px සිට 40px දක්වා - හිස් නිල් පාට (කාරණය එයයි දෙවන වර්ණය ආරම්භ වන්නේ පළමුවැන්න අවසන් වන ස්ථානයේ දී ය). එය ඉහළ සිට පහළට පුනරාවර්තනය වේ:

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

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

උදාහරණය . දිශාව වෙනස් කරමු

දැන් පැතිරීමේ දිශාව වමේ සිට දකුණට වනු ඇත:

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

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

උදාහරණය . අංශක වලින් දිශාව

දිශාව ලෙස අංශක වලින් කෝණයක් නිර්වචනය කරමු:

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

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

උදාහරණය . ඍණ අගය

දිශාව ඍණ අගයක් කරමු:

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

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

තවද බලන්න

repeating-radial-gradient ශ්රිතය,
අනුලක්ෂිත අරය පැතිරීමක් නිර්මාණය කරයි
linear-gradient ශ්රිතය,
රේඛීය පැතිරීමක් නිර්මාණය කරයි
radial-gradient ශ්රිතය,
අරය පැතිරීමක් නිර්මාණය කරයි