<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 300px;
height: 300px;
margin: 0 auto;
/*
radial-gradient()
- 设置径向渐变
*/
background: radial-gradient(red, yellow, orange, yellowgreen);
background: radial-gradient(circle ,red, yellow, orange, yellowgreen);
background: radial-gradient(ellipse ,red, yellow, orange, yellowgreen);
/*
在开头可以指定渐变的形状：
circle 圆形
ellipse 椭圆形
- 也可以通过 半径来指定元素的大小
*/
background: radial-gradient(100px 200px ,red, yellow, orange, yellowgreen);
background: radial-gradient(200px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(at 0 0 ,red, yellow, orange, yellowgreen);
/*
通过at 来指定圆心的位置
*/
background: radial-gradient(at top center ,red, yellow, orange, yellowgreen);
/*
closest-side 表示渐变效果显示到离圆心最近边
farthest-side 表示渐变效果显示到离圆心最远的边
closest-corner 表示渐变效果显示到离圆心最近的角
farthest-corner 表示渐变效果显示到离圆心最远的角
*/
background: radial-gradient(closest-side at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(farthest-side at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(closest-corner at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(farthest-corner at 100px 100px ,red, yellow, orange, yellowgreen);
background: radial-gradient(farthest-corner ,red, yellow, orange, yellowgreen);
background: radial-gradient(red 10%, yellow 20%, orange 30%, yellowgreen 40%);
background: repeating-radial-gradient(red 10%, yellow 20%, orange 30%, yellowgreen 40%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
原文：https://www.cnblogs.com/eric-share/p/13734332.html