Background gradient
Background gradient: Có thể tạo màu sắc của background theo biên độ màu giảm dần.
HTML viết:
<html>
<head></head>
<body>
<div>background gradient background gradient background gradient background gradient background gradient.</div>
</body>
</html>
vị trí: top left - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(top left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top left, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top left - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(top left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top left, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top left - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top left, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top left - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top center - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(top center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top center - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top center - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top center - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top right - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(top right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top right, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top right - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(top right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top right, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top right - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top right, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: top right - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(top right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center left - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(center left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center left - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center left - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center left - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center center - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center center - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center center - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center center - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center right - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(center right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center right, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center right - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(center right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center right, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center right - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center right, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: center right - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(center right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom left - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(bottom left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom left, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom left, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom left - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(bottom left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom left, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom left, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom left - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom left, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom left - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom left, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom center - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(bottom center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom center - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom center - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom center - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom center, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom right - kích thước: closest-side
CSS viết:
div {
background: -moz-radial-gradient(bottom right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom right, circle closest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom right, circle closest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom right - kích thước: closest-corner
CSS viết:
div {
background: -moz-radial-gradient(bottom right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom right, circle closest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom right, circle closest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom right - kích thước: farthest-side
CSS viết:
div {
background: -moz-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom right, circle farthest-side, #ffffff 0%, #cc0000 100%);
height: 200px;
}
Hiển thị trình duyệt khi sử dụng background gradient:
vị trí: bottom right - kích thước: farthest-corner
CSS viết:
div {
background: -moz-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -o-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -ms-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
background: -webkit-radial-gradient(bottom right, circle farthest-corner, #ffffff 0%, #cc0000 100%);
height: 200px;
}