Độ dốc hình nón CSS
Độ dốc hình nón CSS
Một gradient hình nón là một gradient có các chuyển tiếp màu được xoay quanh một điểm trung tâm.
Để tạo gradient hình nón, 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à giữa.
Nếu không chỉ định mức độ , 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 hình nón có ba màu:
Ví dụ
Một gradient hình nón có ba màu:
#grad {
background-image: conic-gradient(red, yellow, green);
}
Hãy tự mình thử »Conic gradient: Năm màu
Ví dụ sau đây cho thấy một gradient hình nón có năm màu:
Ví dụ
Một gradient hình nón có năm màu:
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
Hãy tự mình thử »Conic gradient: Ba màu sắc và độ
Ví dụ sau đây cho thấy một gradient hình nón có ba màu và mức độ cho mỗi màu:
Ví dụ
Một gradient hình nón có ba màu và một mức độ cho mỗi màu:
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
Hãy tự mình thử » Tạo biểu đồ hình tròn
Chỉ cần thêm border-radius: 50%
để làm cho gradient hình nón trông giống như một chiếc bánh:
Ví dụ
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Hãy tự mình thử »Đây là một biểu đồ hình tròn khác có độ xác định cho tất cả các màu:
Ví dụ
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
Hãy tự mình thử »Conic gradient với góc được chỉ định
[Từ góc ] chỉ định một góc mà toàn bộ gradient hình nón được quay theo đó.
Ví dụ sau đây cho thấy một gradient hình nón có góc từ 90 độ:
Ví dụ
Một gradient hình nón có góc từ:
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
Hãy tự mình thử »Conic gradient với vị trí trung tâm được chỉ định
[tại vị trí ] chỉ định tâm của gradient hình nón.
Ví dụ sau đây cho thấy một gradient hình nón có vị trí trung tâm là 60% 45%:
Ví dụ
Một gradient hình nón có vị trí trung tâm được chỉ định:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
Hãy tự mình thử »Lặp lại một gradient hình nón
Hàm repeating-conic-gradient()
được sử dụng để lặp lại gradient hình nón:
Ví dụ
Một gradient hình nón lặp đi lặp lại:
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
Hãy tự mình thử »Đây là một gradient hình nón lặp lại với các điểm bắt đầu màu và điểm dừng màu được xác định:
Ví dụ
Một gradient hình nón lặp lại với các điểm bắt đầu màu và điểm dừng màu được xác định:
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
Hãy tự mình thử »Hàm chuyển màu CSS
Bảng sau liệt kê các hàm chuyển màu CSS:
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 |