Để đặt kích thước của gradient xuyên tâm, hãy sử dụng hàm radial-gradient (). Hàm này đặt một gradient xuyên tâm làm hình nền. Tham số thứ hai trong hàm sẽ được đặt thành kích thước bạn muốn như trong ví dụ dưới đây -
background-image: radial-gradient(40% 50px at center,rgb(30, 255, 0),rgb(0, 195, 255),rgb(128, 0, 32));
Các giá trị có thể có là góc xa nhất (mặc định), cạnh gần nhất, góc gần nhất và cạnh xa nhất. Sau đây là mã để thiết lập kích thước của 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(40% 50px at center,rgb(30, 255, 0),rgb(0, 195,
255),rgb(128, 0, 32));
}
</style>
</head>
<body>
<h1>Radial Gradient Size Example</h1>
<div id="radial"></div>
</body>
</html> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
