radial-gradient යනු

radial-gradient යනු අරය අනුක්‍රමණයක් නිර්වචනය කරයි. මෙම යනු භාවිතා කරන්නේ පසුබිම් පින්තූරයක් නිර්වචනය කරන ගුණාංග සඳහාය: background, background-image හෝ මායිම් පින්තූරයක්: border-image, background-image-source.

වාක්‍ය රීතිය

cssතෝරන්නා {
  background: radial-gradient([ආකෘතිය වර්ගය ස්ථානය], වර්ණ1 ප්‍රමාණය1, වර්ණ2 ප්‍රමාණය2...);
}

අගයන්

වර්ගය සඳහා අගයන්

සටහන

වර්ගය සහ ආකෘතිය ස්ථාන මාරු කළ හැකිය, නමුත් ස්ථානය පළමු පරාමිතිය අවසානයේ යා යුතුය. අනුක්‍රමණ වර්ගය සහ එහි ප්‍රමාණය එකිනෙකා සමඟ ක්‍රියා නොකරයි (තර්කානුකූලව, ඒවා ගැටෙන නිසා). ප්‍රමාණය ජය ගනී.

උදාහරණය . සරලම විකල්පය

අපි සරලව ආරම්භක සහ අවසාන වර්ණය නිර්වචනය කරමු:

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

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . ස්ථානය එකතු කිරීම

අපි මධ්‍යස්ථානයේ පිහිටීම නිර්වචනය කරමු: 30px - වමින් ඉඩ, 100px - ඉහළින් ඉඩ:

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

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . ස්ථානය ප්‍රතිශතයෙන්

අපි මධ්‍යස්ථානයේ පිහිටීම ප්‍රතිශතයෙන් නිර්වචනය කරමු: 30% - වමින් ඉඩ, 50% - ඉහළින් ඉඩ:

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

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . මූලපද මගින් ස්ථානය

මූලපද භාවිතා කළ හැකිය top, bottom, left, right, center විවිධ සංයෝජනවලින්. උදාහරණයක් ලෙස, අනුක්‍රමණය දකුණේ මධ්‍යයේ තබමු:

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

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . අනුක්‍රමණයේ ප්‍රමාණය

මෙම අවස්ථාවේදී අනුක්‍රමණය මේ ආකාරයෙන් ක්‍රියා කරයි: 0px සිට 20px දක්වා පිරිසිදු රතු වර්ණය වේ, 20px සිට 60px දක්වා - අනුක්‍රමණය රතු සිට නිල් දක්වා, 60px පසුව - පිරිසිදු නිල් වර්ණය:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

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

මෙම අවස්ථාවේදී අනුක්‍රමණය මේ ආකාරයෙන් ක්‍රියා කරයි: 0px සිට 20px දක්වා පිරිසිදු රතු වර්ණය වේ, 20px සිට 40px දක්වා පිරිසිදු නිල් වර්ණය වේ, 40px සිට 60px දක්වා - අනුක්‍රමණය නිල් සිට කොළ දක්වා, 60px පසුව - පිරිසිදු කොළ වර්ණය:

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

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . ප්‍රමාණය + ස්ථානය

අපි එකවර විවිධ වර්ණ සඳහා ප්‍රමාණයන් සහ අනුක්‍රමණ මධ්‍යස්ථානයේ පිහිටීම නිර්වචනය කරමු:

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

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

උදාහරණය . අනුක්‍රමණයේ ආකෘතිය

අනුක්‍රමණයේ ආකෘතිය නිර්වචනය කරනු ලබන්නේ පළමු පරාමිතිය මගින් සහ 2 අගයන් ලබා ගත හැකිය: circle (වෘත්තාකාර අනුක්‍රමණය) හෝ ellipse (දීර්ඝ වෘත්තාකාර අනුක්‍රමණය, පෙරනිමිය). එහෙත් ඊට පෙර ඇයි අපි දීර්ඝ වෘත්තාකාර අනුක්‍රමණ දැක නැත, එය පෙරනිමිය ලෙස නිර්වචනය කර ඇතත්? ඊට හේතුව ඊට පෙර කොටුවල හැඩය චතුරස්රාකාර වීමයි. අපි හැඩය සෘජුකෝණාස්රාකාර කළහොත්, අපි දීර්ඝ වෘත්තාකාර අනුක්‍රමණයක් දකිනු ඇත:

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

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වෘත්තාකාර අනුක්‍රමණය

අපි සෘජුකෝණාස්රාකාර කොටුවක වෘත්තාකාර අනුක්‍රමණයක් කරමු. මේ සඳහා පළමු පරාමිතිය ලෙස මූලපදය circle භාවිතයෙන් අනුක්‍රමණයේ ආකෘතිය නිර්වචනය කරමු:

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

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . ස්ථානය එකතු කිරීම

අපි පෙර කේතයට අනුක්‍රමණයේ පිහිටීම ද එකතු කරමු:

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

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය farthest-corner + circle

අනුක්‍රමණයේ ආකෘතිය ගණනය කරනු ලබන්නේ දුරස්ථ කෙළවරට දුර පිළිබඳ තොරතුරු මත පදනම්වය:

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

css#elem {
  background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය farthest-corner + ellipse

අනුක්‍රමණයේ ආකෘතිය ගණනය කරනු ලබන්නේ දුරස්ථ කෙළවරට දුර පිළිබඳ තොරතුරු මත පදනම්වය:

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

css#elem {
  background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය farthest-side + circle

අනුක්‍රමණය දුරස්ථ පස්ස දක්වා ව්‍යාප්ත වේ:

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

css#elem {
  background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය farthest-side + ellipse

අනුක්‍රමණය දුරස්ථ පස්ස දක්වා ව්‍යාප්ත වේ:

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

css#elem {
  background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය closest-corner + circle

අනුක්‍රමණයේ ආකෘතිය ගණනය කරනු ලබන්නේ ආසන්නතම කෙළවරට දුර පිළිබඳ තොරතුරු මත පදනම්වය:

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

css#elem {
  background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය closest-corner + ellipse

අනුක්‍රමණයේ ආකෘතිය ගණනය කරනු ලබන්නේ ආසන්නතම කෙළවරට දුර පිළිබඳ තොරතුරු මත පදනම්වය:

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

css#elem {
  background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය closest-side + circle

අනුක්‍රමණයේ ආකෘතිය එයට ආසන්නතම පසෙකට අනුරූප වේ:

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

css#elem {
  background: radial-gradient(circle closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

උදාහරණය . වර්ගය closest-side + ellipse

අනුක්‍රමණයේ ආකෘතිය එයට ආසන්නතම පසෙකට අනුරූප වේ:

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

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

මෙයද බලන්න