Hàm CSS linear-gradient ()
❮ Tham chiếu các chức năng CSS
Thí dụ
Gradient tuyến tính này bắt đầu ở trên cùng. Nó bắt đầu màu đỏ, chuyển sang màu vàng, sau đó sang màu xanh lam:
#grad {
background-image: linear-gradient(red, yellow, 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 linear-gradient () đặt một gradient tuyến tính làm hình nền.
Để tạo một gradient tuyến tính, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là những màu bạn muốn tạo ra các chuyển tiếp mượt mà giữa các màu. Bạn cũng có thể đặt điểm bắt đầu và hướng (hoặc góc) cùng với hiệu ứng gradient.
Ví dụ về Linear 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 | |||||
---|---|---|---|---|---|
linear-gradient() | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
Cú pháp CSS
background-image: linear-gradient(direction, color-stop1,
color-stop2, ...);
Value | Description |
---|---|
direction | Defines a starting point and a direction (or an angle) along with the gradient effect. |
color-stop1, color-stop2,... | 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 tuyến tính bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu xanh lam:
#grad {
background-image: linear-gradient(to right, red , blue);
}
Thí dụ
Một gradient tuyến tính bắt đầu ở trên cùng bên trái (và đi xuống dưới cùng bên phải):
#grad {
background-image: linear-gradient(to bottom right, red , blue);
}
Thí dụ
Một gradient tuyến tính với một góc xác định:
#grad {
background-image: linear-gradient(180deg, red, blue);
}
Thí dụ
Một gradient tuyến tính với nhiều điểm dừng màu:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Thí dụ
Một gradient tuyến tính với độ trong suốt:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Các trang liên quan
Hướng dẫn CSS: CSS Gradients
❮ Tham chiếu các chức năng CSS