效果图：
radial-gradient()函数创建了一个图片，其由原点辐射开的在俩个或者多个点颜色之前的渐变组成
写法：
background:radial-gradient(#ccc,#9198e5)
background:radial-gradient(closest，#ccc,#9198e5，#ff3040)
background:radial-gradient(circle at 100%,#ccc,#ccc 50%,#9198e5,75%,#ff3040 75%)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
[attr^="val1"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(red, #9198e5);
}
[attr^="val2"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
}
[attr^="val3"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333333 75%);
}
[attr^="val4"] {
float: left;
width: 200px;
height: 200px;
margin: 20px;
background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
}
</style>
<body>
<div attr="val1">
</div>
<div attr="val2">
</div>
<div attr="val3">
</div>
<div attr="val4">
</div>
</body>
</html>
本文地址：https://blog.csdn.net/m0_47480813/article/details/112799077
