Gradients hiển thị sự kết hợp của hai hoặc nhiều màu. Gradient tuyến tính được sử dụng để sắp xếp hai hoặc nhiều màu theo các định dạng tuyến tính như từ trên xuống dưới. Gradient xuyên tâm xuất hiện ở trung tâm.
Sau đây là đoạn mã hiển thị cách sử dụng gradient tuyến tính và xuyên tâm trong CSS3 -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.linearGradient {
height: 100px;
width: 300px;
background-image: linear-gradient(rgb(255, 0, 200), yellow);
}
.radialGradient {
height: 200px;
width: 200px;
background-image: radial-gradient(rgb(255, 0, 200),yellow);
}
</style>
</head>
<body>
<h2>Linear Gradient </h2>
<div class="linearGradient"></div>
<h2>Radial Gradient</h2>
<div class="radialGradient"></div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
