Hướng dẫn background 2 màu css

Trang chủ
Tham khảo
CSS
CSS3
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í và 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í và 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 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;
}