Đối với Radial Gradients, hãy đặt các điểm dừng màu. Hình dạng mặc định là Ellipse, nhưng bạn cũng có thể đặt các hình dạng khác như hình tròn. Đặt ít nhất hai điểm dừng màu cho Radial Gradients trong CSS.
Sau đây là mã để tạo gradient xuyên tâm bằng CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#radial {
height: 200px;
width: 200px;
background-image: radial-gradient(
rgb(255, 0, 106),
rgb(2, 0, 128),
rgb(0, 255, 42)
);
}
</style>
</head>
<body>
<h1>Radial Gradient Example</h1>
<div id="radial"></div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
