Repeating-linear-gradient funktsiyasi

repeating-linear-gradient funktsiyasi takrorlanuvchi chiziqli gradientni belgilaydi. Bu shuni anglatadiki, biz gradientning ma'lum bir naqshini belgilaymiz, masalan, 0px dan 10px gacha - qizildan havo rangigacha gradient va bu gradient butun blok bo'ylab takrorlanadi: 0px dan 10px gacha, 10px dan 20px gacha, 20px dan 30px gacha va hokazo.

Ushbu funktsiya fon rasmini belgilovchi xususiyatlarga qo'llaniladi: background, background-image yoki chegaraning rasmi: border-image, background-image-source.

Sintaksis

selektor {
	background: repeating-linear-gradient([yo'nalish], rang1 hajm1, rang2 hajm2...);
}

Qiymatlar

Qiymat	Tavsif
yo'nalish	Gradientning ma'lum bir yo'nalishini har qanday burchak birliklarida yoki kalit so'zlar bilan belgilaydi `top`, `left`, `right`, `bottom` yoki ularning kombinatsiyasi. So'zlarning tartibi muhim emas. Parametr ixtiyoriy: agar yozilmasa, gradient yuqoridan pastga qarab boradi. Yo'nalishdan oldin `to` so'zi qo'yiladi.
burchak	Har qanday burchak birliklarida burchak. Musbat yoki manfiy bo'lishi mumkin. Parametr ixtiyoriy. Bir vaqtning o'zida burchak yoki yo'nalish belgilanishi mumkin (yoki hech narsa).
rang1	Gradientning boshlang'ich rangi har qanday rang birliklarida.
rang2	Gradientning tugash rangi har qanday rang birliklarida.
hajm	Gradientning ma'lum bir rangining cho'zilishini belgilaydi har qanday hajm birliklarida.

Misol . Eng oddiy variant

Gradient shunday ko'rinadi: 0px dan 20px gacha toza qizil rang, 20px dan 40px gacha - qizildan havo rangigacha gradient. Va shu yuqoridan pastgacha takrorlanadi (bu takrorlanuvchi gradient):

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

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

Misol . Aniq ranglar

Gradient shunday ko'rinadi: 0px dan 20px gacha toza qizil rang, 20px dan 40px gacha - toza havo rangi (masalan, birinchi rang tugagan joyda ikkinchi rang boshlanadi). Va shu yuqoridan pastgacha takrorlanadi:

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

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

Misol . Yo'nalishni o'zgartiramiz

Hozir gradient yo'nalishi o'ngdan chapga bo'ladi:

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

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

Misol . Darajalarda yo'nalish

Yo'nalish sifatida darajalarda burchak belgilaymiz:

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

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

Misol . Manfiy qiymat

Yo'nalishni manfiy qiymat bilan belgilaymiz:

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

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

Shuningdek qarang

repeating-radial-gradient funktsiyasi,
bu takrorlanuvchi radial gradient yaratadi
linear-gradient funktsiyasi,
bu chiziqli gradient yaratadi
radial-gradient funktsiyasi,
bu radial gradient yaratadi