⌘K

Funksiya repeating-linear-gradient

Funksiya repeating-linear-gradient təkrarlanan xətti qradiyenti təyin edir. Bu o deməkdir ki, biz qradiyentin müəyyən bir naxışını təyin edirik, məsələn, 0px-dən 10px-ə qədər - qırmızıdan maviyə qradiyent və bu qradiyent bütün blok boyunca təkrarlanacaq: 0px-dən 10px-ə qədər, 10px-dən 20px-ə qədər, 20px-dən 30px-ə qədər və s.

Bu funksiya arxa plan şəklini təyin edən xassələrə şamil edilir: background, background-image və ya sərhəd şəklini: border-image, border-image-source.

Sintaksis

cssselektor {
  background: repeating-linear-gradient([istiqamət], rəng1 ölçü1, rəng2 ölçü2...);
}

Dəyərlər

Dəyər Təsvir
istiqamət Qradiyentin müəyyən bir istiqamətini hər hansı bucaqlar üçün vahidlərdə və ya açar sözlərlə təyin edir top, left, right, bottom və ya onların birləşməsi. Sözlərin sırası vacib deyil. Parametr isteğe bağlıdır: əgər yazılmasa, qradiyent yuxarıdan aşağıya doğru olacaq. İstiqamətdən əvvəl to sözü qoyulur.
bucaq Hər hansı bucaqlar üçün vahidlərdə bucaq. Müsbət və ya mənfi ola bilər. Parametr isteğe bağlıdır. Eyni zamanda ya bucaq, ya istiqamət təyin edilə bilər (və ya heç nə).
rəng1 Qradiyentin başlanğıc rəngi hər hansı rəng üçün vahidlərdə.
rəng2 Qradiyentin son rəngi hər hansı rəng üçün vahidlərdə.
ölçü Qradiyentin müəyyən bir rənginin uzunluğunu təyin edir hər hansı ölçü üçün vahidlərdə.

Nümunə . Ən sadə variant

Qradiyent belə görünəcək: 0px-dən 20px-ə qədər təmiz qırmızı rəng, 20px-dən 40px-ə qədər - qırmızıdan maviyə qradiyent. Və bu yuxarıdan aşağıya təkrarlanacaq (bunun üçün o, təkrarlanan qradiyentdir): 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(red 20px, blue 40px);
  width: 400px;
  height: 200px;
}

Результат:

Nümunə . Təmiz rənglər

Qradiyent belə görünəcək: 0px-dən 20px-ə qədər təmiz qırmızı rəng, 20px-dən 40px-ə qədər - təmiz mavi (xüsusiyyət ondadır ki, ikinci rəng birincinin bitdiyi yerdə başlayır). Və bu yuxarıdan aşağıya təkrarlanacaq: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
  width: 400px;
  height: 200px;
}

Результат:

Nümunə . İstiqaməti dəyişək

İndi qradiyentin istiqaməti sağdan sola olacaq: 

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;
}

Результат:

Nümunə . Dərəcələrdə istiqamət

İstiqamət kimi dərəcələrdə bucaq təyin edək: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
  width: 400px;
  height: 200px;
}

Результат:

Nümunə . Mənfi dəyər

İstiqaməti mənfi dəyər edək: 

html<div id="elem"></div>
css#elem {
  background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
  width: 400px;
  height: 200px;
}

Результат:

Həmçinin bax

Backradial-gradient funksiyasıNextFunksiya repeating-radial-gradient