repeating-radial-gradient ֆունկցիա

repeating-radial-gradient ֆունկցիան սահմանում է կրկնվող ճառագայթային գրադիենտ: Սա նշանակում է, որ մենք սահմանում ենք գրադիենտի որոշակի նախշ, օրինակ՝ 0px-ից մինչև 10px - կարմիրից դեպի երկնագույն գրադիենտ, և այս գրադիենտը կկրկնվի ամբողջ բլոկում. 0px-ից մինչև 10px, 10px-ից մինչև 20px, 20px-ից մինչև 30px և այլն:

Ֆունկցիան աշխատում է նույն պարամետրերով, ինչ radial-gradient, տարբերությունը միայն կրկնման էֆեկտում է: Ընդունված պարամետրերը տեսնելու համար տեսեք radial-gradient-ի նկարագրությունը:

Շարահյուսություն

cssընտրիչ {
  background: repeating-radial-gradient([ձև տեսակ դիրք], գույն1 չափ1, գույն2 չափ2...);
}

Օրինակ

Կենտրոնական շրջաններ:

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

css#elem {
  background: repeating-radial-gradient(circle at center, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Օրինակ

Կենտրոնական էլիպսներ:

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

css#elem {
  background: repeating-radial-gradient(ellipse at center, red 0px, red 4px, white 4px, white 8px);
  width: 400px;
  height: 200px;
}

Результат:

Օրինակ

Կենտրոնական շրջանները տեղադրենք ոչ թե կենտրոնում, այլ եզրին:

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

css#elem {
  background: repeating-radial-gradient(circle at 50px 100px, red 0px, red 2px, white 2px, white 4px);
  width: 400px;
  height: 200px;
}

Результат:

Տես նաև