canvas结合js可以给设置渐变,那么纯css可以么?
可以,利用background属性就可以设置。radial-gradient参数就是从开始到结束的颜色,也可以在每个颜色后面附上范围。
比如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1 {
height: 260px;
width: 260px;
border-radius: 100%;/*turn rect into cycle*/
background: radial-gradient(#ffffff 70px,#ff6633 80px,#ffff00 90px,green 100px,#008aff 110px,purple 120px);
}
#grad2 {
height:260px;
width:260px;
border-radius:100% ;
background: radial-gradient(#ffffff ,#ff6633 ,#ffff00,green,#008aff,purple)
}
</style>
</head>
<body>
<h3>径向渐变 - 形状</h3>
<div id="grad1"></div>
<div id="grad2"></div>
</body>
</html>
结果
image.png