Background gradient trong CSS3

Background gradient trong CSS3

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

Bảng giá trị vị-trí dành cho trình duyệt

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

right bottom,right top
 
topleft top,left bottom

right top,right bottom
 
leftleft top,right top

left bottom,right bottom
 
rightrigh top,left top

right bottom,left bottom
 
left bottomleft bottom,right top
 
left topleft top,right bottom
 
right bottomright bottom,left top
 
right topright 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í và kích-thước

Giá trịhiển thị
vị-tríkích-thước
top leftclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
top centerclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
top rightclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
center leftclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
center centerclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
Center rightclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom leftclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom centerclosest-side
 
closest-corner
 
farthest-side
 
farthest-corner
 
bottom rightclosest-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í và kích-thước


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

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:

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:


Bình luận