Функция 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;
}

Результат:

Сондай-ақ қараңыз