Hàm linear-gradient
Hàm linear-gradient xác định một gradient
tuyến tính. Được áp dụng cho các thuộc tính
thiết lập hình nền: background,
background-image
hoặc hình ảnh đường viền: border-image,
background-image-source.
Cú pháp
bộ chọn {
background: linear-gradient([góc hoặc hướng], màu1 kích_thước1, màu2 kích_thước2...);
}
Giá trị
| Giá trị | Mô tả |
|---|---|
| hướng |
Xác định hướng cụ thể của gradient bằng bất kỳ đơn vị góc nào
hoặc bằng từ khóa top, left, right, bottom
hoặc kết hợp của chúng: top left, top right và vân vân.
Thứ tự các từ không quan trọng: có thể viết top left và left top,
không có sự khác biệt. Tham số này không bắt buộc: nếu không viết, gradient sẽ
chạy từ trên xuống dưới (như với to top). Trước hướng đặt từ to.
|
| góc | Góc bằng bất kỳ đơn vị góc nào. Có thể là số dương hoặc số âm. Tham số không bắt buộc. Đồng thời có thể chỉ định góc, hoặc hướng (hoặc không có gì cả). |
| màu1 | Màu bắt đầu của gradient trong bất kỳ đơn vị màu nào. |
| màu2 | Màu kết thúc của gradient trong bất kỳ đơn vị màu nào. |
| kích_thước | Xác định độ dài của một màu cụ thể trong gradient bằng bất kỳ đơn vị kích thước nào. |
Ví dụ . Biến thể đơn giản nhất
Cú pháp:
bộ chọn {
background: linear-gradient(màu bắt đầu, màu kết thúc);
}
Hãy xem ví dụ:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Ví dụ . Thêm góc
Cú pháp:
bộ chọn {
background: linear-gradient(góc, màu bắt đầu, màu kết thúc);
}
Hãy xem ví dụ:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Ví dụ . Thêm hướng
Thay vì góc, có thể thêm hướng
top, left, right, bottom
hoặc kết hợp của chúng: top left, top right
Trước hướng đặt từ to.
Cú pháp:
bộ chọn {
background: linear-gradient(hướng, màu bắt đầu, màu kết thúc);
}
Hãy xem ví dụ:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Ví dụ . Thêm hướng
Hãy chỉ định hướng khác:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Ví dụ . Thêm kích thước
Cú pháp:
bộ chọn {
background: linear-gradient(màu1 kích_thước1, màu2 kích_thước2);
}
Trong ví dụ tiếp theo, hành vi sẽ như sau:
màu đỏ thuần sẽ từ 0px đến
30px, từ 30px đến 50px
sẽ là gradient từ đỏ đến xanh dương, và
từ 50px trở đi - xanh dương thuần:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Ví dụ . Thêm nhiều hơn 2 màu
Cú pháp:
bộ chọn {
background: linear-gradient(màu1 kích_thước1, màu2 kích_thước2, màu3 kích_thước3...);
}
Trong ví dụ tiếp theo, hành vi sẽ như sau:
màu đỏ thuần sẽ từ 0px đến
30px, từ 30px đến 50px
sẽ là gradient từ đỏ đến xanh dương, và
từ 50px đến 70px - gradient từ xanh dương
đến xanh lá, và sau 70px - xanh lá thuần:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Ví dụ . Chuyển tiếp đột ngột
Trong ví dụ tiếp theo, hành vi sẽ như sau:
màu đỏ thuần sẽ từ 0px đến
30px, xanh dương thuần - từ 30px
đến 60px, xanh lá thuần - sau 60px
(có thể không cần viết red 0px):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Ví dụ . Kích thước cũng có thể được đặt bằng phần trăm
Trong ví dụ tiếp theo, hành vi sẽ như sau:
màu đỏ thuần sẽ từ 0% đến
30%, xanh dương thuần - từ 30%
đến 60%, xanh lá thuần - sau 60%
(có thể không cần viết red 0%):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Ví dụ . Kết hợp với background-size
Trong ví dụ tiếp theo, hành vi sẽ như sau:
màu đỏ thuần sẽ từ 0px đến
30px, xanh dương thuần - từ 30px
đến 60px, đồng thời tất cả điều này sẽ lặp lại
từng đoạn 60px (do background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Xem thêm
-
hàm
radial-gradient,
tạo gradient xuyên tâm -
hàm
repeating-linear-gradient,
tạo gradient tuyến tính lặp lại -
hàm
repeating-radial-gradient,
tạo gradient xuyên tâm lặp lại
