Độ dốc xuyên tâm CSS
Độ dốc xuyên tâm CSS
Một gradient xuyên tâm được xác định bởi tâm của nó.
Để tạo dải màu 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à giữa.
Độ dốc xuyên tâm - Điểm dừng màu cách đều nhau (đây là mặc định)
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ách đều nhau:
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:
Đặ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ị là 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ó dạng hình tròn:
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ị:
- phía gần nhất
- phía xa nhất
- góc gần nhất
- góc xa nhất
Ví dụ
Một gradient xuyên tâm với các từ khóa có 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);
}
Hãy tự mình thử »Lặp lại một gradient xuyên tâm
Hàm lặp lại-radial-gradient() được sử dụng để lặp lại các gradient xuyên tâm:
Ví dụ
Một gradient xuyên tâm lặp lại:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}
Hãy tự mình thử »