CSS Radial Gradients
CSS Radial Gradients
Một gradient xuyên tâm được xác định bởi tâm của nó.
Để tạo một gradient xuyên tâm, bạn cũng phải xác định ít nhất hai điểm dừng màu.
Cú pháp
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Theo mặc định, hình dạng là hình elip, kích thước là góc xa nhất và vị trí là trung tâm.
Radial Gradient - Các điểm dừng màu có khoảng cách đều nhau (đây là mặc định)
Ví dụ sau cho thấy một gradient xuyên tâm với các điểm dừng màu cách đều nhau:
Thí dụ
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radial Gradient - Các điểm dừng màu có khoảng cách khác nhau
Ví dụ sau đây cho thấy một gradient xuyên tâm với các điểm dừng màu có khoảng cách khác nhau:
Thí dụ
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Đặt hình dạng
Tham số hình dạng xác định hình dạng. Nó có thể lấy giá trị hình tròn hoặc hình elip. Giá trị mặc định là hình elip.
Ví dụ sau đây cho thấy một gradient xuyên tâm có hình dạng của một vòng tròn:
Thí dụ
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Sử dụng các từ khóa có kích thước khác nhau
Tham số kích thước xác định kích thước của gradient. Nó có thể nhận bốn giá trị:
- gần nhất
- xa nhất
- góc gần nhất
- góc xa nhất
Thí dụ
Một gradient xuyên tâm với các từ khóa kích thước khác nhau:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Lặp lại một gradient xuyên tâm
Hàm repeat-radial-gradient () được sử dụng để lặp lại các gradient xuyên tâm:
Thí dụ
Một gradient xuyên tâm lặp lại:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}