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í: bottom
CSS viết:
div {
background-color: #1a82f7;
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 sử dụng background gradient:
Vị trí: top
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(top, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(top, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(top, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi sử dụng Vị trí: top:
Vị trí: left
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(left, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(left, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(left, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left top,right top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi sử dụng Vị trí: left:
Vị trí: right
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(right, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(right, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(right, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,right top,left top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi sử dụng Vị trí: right:
Vị trí: left bottom
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(left bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(left bottom, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(left bottom, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left bottom,right top top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi sử dụng Vị trí: left bottom:
Vị trí: left top
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(left top, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(left top, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(left top, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,left top,right bottom top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi sử dụng Vị trí: left top:
Vị trí: right bottom
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(right bottom, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(right bottom, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(right bottom, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,right bottom,left top top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}
Hiển thị trình duyệt khi sử dụng Vị trí: right bottom:
Vị trí: right top
CSS viết:
div {
background-color: #1a82f7;
background: -moz-linear-gradient(right top, #cc0000 30%, #330000 70%);
background: -o-linear-gradient(right top, #cc0000 30%, #330000 70%);
background: -ms-linear-gradient(right top, #cc0000 30%, #330000 70%);
background: -webkit-gradient(linear,right top,left bottom top,color-stop(0.3, #cc0000),color-stop(0.7, #330000));
height: 300px;
width: 300px;
}