CSS Conic Gradients
CSS Conic Gradients
Gradient conic là một gradient với các chuyển đổi màu được quay xung quanh một điểm trung tâm.
Để tạo một gradient conic, bạn phải xác định ít nhất hai màu.
Cú pháp
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
Theo mặc định, góc là 0deg và vị trí là trung tâm.
Nếu không có mức độ nào được chỉ định, các màu sẽ được trải đều xung quanh điểm trung tâm.
Conic Gradient: Ba màu
Ví dụ sau đây cho thấy một gradient conic với ba màu:
Thí dụ
Một gradient conic với ba màu:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Conic Gradient: Năm màu
Ví dụ sau cho thấy một gradient conic với năm màu:
Thí dụ
Một gradient conic với năm màu:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Conic Gradient: Ba màu và độ
Ví dụ sau cho thấy một gradient conic với ba màu và một mức độ cho mỗi màu:
Thí dụ
Một gradient conic với ba màu và mức độ cho mỗi màu:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Tạo biểu đồ hình tròn
Chỉ cần thêm border-radius: 50%để làm cho gradient conic trông giống như một chiếc bánh:
Thí dụ
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Đây là một biểu đồ hình tròn khác với các độ được xác định cho tất cả các màu:
Thí dụ
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Conic Gradient với các góc được chỉ định
[ From angle ] chỉ định một góc mà toàn bộ gradient conic được xoay.
Ví dụ sau đây cho thấy một gradient conic với góc từ 90deg:
Thí dụ
Một gradient conic với một góc từ:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Conic Gradient với vị trí trung tâm được chỉ định
[At position ] chỉ định tâm của gradient conic.
Ví dụ sau đây cho thấy một gradient conic với vị trí trung tâm là 60% 45%:
Thí dụ
Một gradient conic với một vị trí trung tâm được chỉ định:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Lặp lại một Gradient Conic
Hàm repeating-conic-gradient()được sử dụng để lặp lại các gradient hình nón:
Thí dụ
Một gradient conic lặp lại:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Dưới đây là một gradient hình nón lặp lại với các màu bắt đầu và dừng màu được xác định:
Thí dụ
Một gradient hình nón lặp lại với các màu bắt đầu và dừng màu xác định:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Các chức năng của CSS Gradient
Bảng sau liệt kê các hàm CSS gradient:
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |