Love beautiful code? We do too.
Gradient là gì ?
Gradient biểu thị sự kết hợp của hai hay nhiều màu, như dưới đây:−
Các loại Gradient trong CSS
- Linear Gradient(down/up/left/right/diagonally)
- Radial Gradient
Linear Gradient trong CSS
Linear Gradient được sử dụng để sắp xếp hai hay nhiều màu trong các định dạng tuyến, ví dụ như dạng từ trên xuống dưới (Top to Bottom):
Top to bottom
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Kết quả là:
Left to right
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Kết quả là:
Diagonal trong CSS
Diagonal bắt đầu từ góc trái trên cùng và góc phải dưới cùng.
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Kết quả là:
Multi color trong CSS
<html>
<head>
<style>
#grad2 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>Kết quả là:
Radial Gradient trong CSS
Radial Gradient xuất hiện tại vị trí trung tâm.
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Kết quả là:
Repeat Radial Gradient trong CSS
<html>
<head>
<style>
#grad1 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>Kết quả là:
Unpublished comment
Viết câu trả lời