Hàm repeating-radial-gradient

Hàm repeating-radial-gradient thiết lập một gradient xuyên tâm 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 lơ 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 hoạt động với các tham số giống như radial-gradient, chỉ khác biệt ở hiệu ứng lặp lại. Để biết các tham số được chấp nhận, hãy xem mô tả của radial-gradient.

Cú pháp

bộ chọn {
	background: repeating-radial-gradient([hình dạng loại vị trí], màu1 kích_thước1, màu2 kích_thước2...);
}

Ví dụ

Các vòng tròn đồng tâm:

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

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

Ví dụ

Các hình elip đồng tâm:

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

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

Ví dụ

Đặt các vòng tròn đồng tâm không ở giữa, mà ở cạnh:

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

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

Xem thêm

hàm repeating-linear-gradient,
tạo ra một gradient tuyến tính 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