CSS3: linear-gradient chéo góc
Giải phóng thời gian, khai phóng năng lực
Bạn hoàn toàn có thể tạo linear gradient theo hướng chéo góc bằng cách xác định cả phương ngang và phương dọc (trái-phải và trên-dưới).
Cú pháp tổng quát:
background: linear-gradient(to phương1 phương2, màu1, màu2, ..., màun);
Linear Gradient theo hướng chéo góc xuống dưới bottom-right
Cú pháp:
background: linear-gradient(to bottom right, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to bottom right, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc trên-trái xuống dưới góc dưới-phải, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng chéo góc lên trên top-left
Cú pháp:
background: linear-gradient(to top left, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to top left, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc dưới-phải lên góc trên-trái, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng chéo góc xuống dưới bottom-left
Cú pháp:
background: linear-gradient(to bottom left, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to bottom left, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc trên-phải xuống dưới góc dưới-trái, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Linear Gradient theo hướng chéo góc lên trên top-right
Cú pháp:
background: linear-gradient(to top right, màu1, màu2, ..., màun);
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:200px;
width:50%;
background: linear-gradient(to top right, red, blue);
}
</style>
</head>
<body>
<p>Linear Gradient theo hướng từ góc dưới-trái đi lên góc trên-phải, bắt đầu là màu 'red', kết thúc là màu 'blue'.</p>
<div id="grad1"></div>
</body>
</html>
Giải phóng thời gian, khai phóng năng lực