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-	hiển thị
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í và kích-thước

Giá trị		hiển thị
vị-trí	kích-thước	hiển thị
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í và kích-thước

Giá trị		hiển thị
vị-trí	kích-thước	hiển thị
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

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:

Background gradient trong CSS3