Background gradient

Đị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

Giá trị vị-trí hiển thị
-moz-, -o-, -ms- -webkit-
bottom left bottom,left top

right bottom,right top
 
top left top,left bottom

right top,right bottom
 
left left top,right top

left bottom,right bottom
 
right righ top,left top

right bottom,left bottom
 
left bottom left bottom,right top
 
left top left top,right bottom
 
right bottom right bottom,left top
 
right top right top,left bottom
 

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íkích-thước

Giá trị hiển thị
vị-trí kích-thước
top left closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
top center closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
top right closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
center left closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
center center closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
Center right closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom left closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom center closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom right closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 

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íkích-thước

Giá trị hiển thị
vị-trí kích-thước
top left closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
top center closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
top right closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
center left closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
center center closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
Center right closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom left closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom center closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom right closest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 

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:

Background gradient

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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
background gradient 10 12
-moz-
12
-o-
20
-webkit-
5.1
-webkit-
3.2
-webkit-
2.1
-webkit-
8