repeating-linear-gradient ශ්රිතය

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

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

වාක්‍ය රචනය

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

අගයන්

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

තවද බලන්න