Hàm radial-gradient () CSS
❮ Tham chiếu các chức năng CSS
Thí dụ
Một gradient xuyên tâm với các điểm màu cách đều nhau:
#grad {
background-image: radial-gradient(red, green, blue);
}
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 radial-gradient () đặt một gradient xuyên tâm làm hình nền.
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 phải xác định ít nhất hai điểm dừng màu.
Ví dụ về Radial 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.
Các số theo sau -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Function | |||||
---|---|---|---|---|---|
radial-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
Cú pháp CSS
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Value | Description |
---|---|
shape | Defines the shape of the gradient. Possible values:
|
size | Defines the size of the gradient. Possible values:
|
position | Defines the position of the gradient. Default is "center" |
start-color, ..., last-color | 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 percentage between 0% and 100% or a length along the gradient axis). |
Các ví dụ khác
Thí dụ
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:
#grad {
background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
Thí dụ
Một gradient xuyên tâm có hình dạng của một vòng tròn:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
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%, blue, green, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}
Các trang liên quan
Hướng dẫn CSS: CSS Gradients
❮ Tham chiếu các chức năng CSS