css 径向渐变

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容