Hàm CSS conic-gradient ()
❮ Tham chiếu các chức năng CSS
Thí dụ
Một gradient conic với ba màu:
#grad {
background-image: conic-gradient(red, yellow,
green);
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Hàm conic-gradient () đặt một gradient conic làm hình nền.
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 hình nón, bạn phải xác định ít nhất hai điểm dừng màu.
Ví dụ về Conic Gradient:
Phiên bản: | CSS3 |
---|
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ chức năng.
Function | |||||
---|---|---|---|---|---|
conic-gradient() | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
Cú pháp CSS
background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Value | Description |
---|---|
from angle | Optional. The entire conic gradient is rotated by this angle. Default value is 0deg |
at position | Optional. Specifies the gradient center of the conic gradient. Default value is center |
color degree, ..., color degree | Color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a degree between 0 and 360 or a percent between 0% and 100%). |
Các ví dụ khác
Thí dụ
Một gradient conic với năm màu:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
}
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)
}
Thí dụ
Làm cho gradient hình nón trông giống như một chiếc bánh bằng cách thêm bán kính đường viền: 50%:
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
Thí dụ
Một gradient conic với một góc từ:
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
Thí dụ
Một gradient conic với một vị trí tại:
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Thí dụ
Một gradient conic với cả từ góc và tại vị trí:
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
Thí dụ
Một biểu đồ hình tròn khác:
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow
90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
Các trang liên quan
Hướng dẫn CSS: CSS Gradients
❮ Tham chiếu các chức năng CSS