Hàm CSS repeating-radial-gradient()

Định nghĩa và cách sử dụng

CSS repeating-radial-gradient() Hàm dùng để tạo dải màu trục tọa độ lặp lại.

Dải màu trục tọa độ	Dải màu trục tọa độ lặp lại

radial-gradient(red, yellow, green);	repeating-radial-gradient(red, yellow 10%, green 15%);

Một dải màu trục tọa độ lặp lại:

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Một dần lặp lại khác, đã thiết lập hình dạng, kích thước và vị trí:

#grad1 {
  background-image: repeating-radial-gradient(ellipse farthest-corner at 25% 25%, red, yellow 10%, green 15%);
}

Một dần lặp lại khác, đã thiết lập hai vị trí dừng màu:

#grad1 {
  background-image: repeating-radial-gradient(red 0% 10%, yellow 11% 21%, green 22% 32%);
}

repeating-radial-gradient(shape size at position, start-color, ... , last-color);

Giá trị	Mô tả
shape	Định nghĩa hình dạng của dần. Các giá trị có thể: ellipse (mặc định) circle
size	Định nghĩa kích thước của dần. Các giá trị có thể: farthest-corner (mặc định) closest-side closest-corner farthest-side
at position	Định nghĩa vị trí của dần. Giá trị mặc định là "center".
start-color, ... , last-color	Điểm kết thúc màu là màu mà bạn muốn hiển thị chuyển đổi mượt mà giữa chúng. Giá trị này bao gồm giá trị màu và một hoặc hai vị trí dừng tùy chọn (phần trăm từ 0% đến 100% hoặc độ dài theo trục dần)