Định nghĩa và sử dụng
Trong CSS3 chúng ta có thể tạo màu sắc cho background theo biên độ giảm dần.
Các dạng background gradient
LINEAR
Cấu trúc
tag {
background: -moz-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
background: -o-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
background: -ms-linear-gradient(vị-trí, mã-màu-1 n1%, mã-màu-2 n2%,..., mã-màu-n n%);
background: -webkit-gradient(linear,vị-trí,color-stop(0.n1, mã-màu-1),color-stop(0.n2, mã-màu2),...,color-stop(0.n, mã-màu-n));
}
Trong đó:
- vị-trí: được xác định theo bảng giá trị bên dưới.
- mã-màu: giá trị màu, tham khảo.
n: độ tràn màu (hay độ trộn lẫn).
- Tính theo % : đối với -moz-, -o-, -ms-.
- Tính theo giá trị thập phân (từ 0 - 1) : đối với -webkit-.
Bảng giá trị vị-trí dành cho trình duyệt
CIRCLE
Cấu trúc
div {
background: -moz-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -o-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -ms-radial-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -webkit-gradient(vị-trí, circle kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
}
Trong đó:
- vị-trí: được xác định theo bảng giá trị bên dưới.
- kích-thước: được xác định theo bảng giá trị bên dưới
- mã-màu: giá trị màu, tham khảo.
n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.
Bảng giá trị vị-trí và kích-thước
ELLIPSE
Cấu trúc
div {
background: -moz-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -o-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -ms-radial-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
background: -webkit-gradient(vị-trí, ellipse kích-thước, mã-màu-1 n1%, mã-màu-2 n2%);
}
Trong đó:
- vị-trí: được xác định theo bảng giá trị bên dưới.
- kích-thước: được xác định theo bảng giá trị bên dưới
- mã-màu: giá trị màu, tham khảo.
n: độ tràn màu (hay độ trộn lẫn), giá trị tính theo %.
Bảng giá trị vị-trí và kích-thước
Ví dụ
HTML viết:
<html> <head></head> <body> <p>Background gradient</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
Background gradient
Background gradient dạng linear, CSS viết:
div {
background-color: #cc0000;
background: -moz-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(bottom, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi có CSS:
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính background gradient:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| background gradient | 10 | 12 -moz- |
12 -o- |
20 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |