Hàm repeating-linear-gradient

Hàm repeating-linear-gradient thiết lập một gradient tuyến tính lặp lại. Điều này có nghĩa là chúng ta xác định một mẫu gradient nhất định, ví dụ, từ 0px đến 10px - gradient từ màu đỏ sang màu xanh lam và gradient này sẽ lặp lại trên toàn bộ khối: từ 0px đến 10px, từ 10px đến 20px, từ 20px đến 30px và cứ thế tiếp tục.

Hàm này được áp dụng cho các thuộc tính thiết lập hình ảnh nền: background, background-image hoặc hình ảnh viền: border-image, background-image-source.

Cú pháp

bộ chọn {
	background: repeating-linear-gradient([hướng], màu1 kích_thước1, màu2 kích_thước2...);
}

Giá trị

Giá trị	Mô tả
hướng	Xác định hướng cụ thể của gradient bằng bất kỳ đơn vị đo góc nào hoặc bằng các từ khóa `top`, `left`, `right`, `bottom` hoặc kết hợp của chúng. Thứ tự các từ không quan trọng. Tham số này là tùy chọn: nếu không viết ra, gradient sẽ chạy từ trên xuống dưới. Trước hướng đặt từ `to`.
góc	Góc bằng bất kỳ đơn vị đo góc nào. Có thể là số dương hoặc số âm. Tham số tùy chọn. Có thể được thiết lập đồng thời hoặc góc, hoặc hướng (hoặc không có gì cả).
màu1	Màu bắt đầu của gradient bằng bất kỳ đơn vị màu nào.
màu2	Màu kết thúc của gradient bằng bất kỳ đơn vị màu nào.
kích thước	Xác định độ dài của một màu cụ thể trong gradient bằng bất kỳ đơn vị kích thước nào.

Ví dụ . Biến thể đơn giản nhất

Gradient sẽ trông như thế này: từ 0px đến 20px là màu đỏ thuần, từ 20px đến 40px - gradient từ đỏ sang xanh lam. Và điều này sẽ lặp lại từ trên xuống dưới (đó là lý do nó được gọi là gradient lặp lại):

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

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

Ví dụ . Màu sắc rõ ràng

Gradient sẽ trông như thế này: từ 0px đến 20px là màu đỏ thuần, từ 20px đến 40px - màu xanh lam thuần (điểm đặc biệt ở đây là màu thứ hai bắt đầu ngay tại điểm mà màu đầu tiên kết thúc). Và điều này sẽ lặp lại từ trên xuống dưới:

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

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

Ví dụ . Thay đổi hướng

Bây giờ hướng gradient sẽ từ phải sang trái:

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

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

Ví dụ . Hướng tính bằng độ

Làm hướng bằng một góc tính bằng độ:

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

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

Ví dụ . Giá trị âm

Hãy làm cho hướng là một giá trị âm:

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

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

Xem thêm

hàm repeating-radial-gradient,
tạo ra một gradient xuyên tâm lặp lại
hàm linear-gradient,
tạo ra một gradient tuyến tính
hàm radial-gradient,
tạo ra một gradient xuyên tâm