小编给大家分享一下CSS属性*-gradient怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务肇东,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
圆锥渐变!
对其感兴趣是因为我发现它竟然可以用来做圆饼图!
比如这样的:
![CSS属性*-gradient怎么用](https://www.cdcxhl.com/upload/otherpic54/3446.jpg)
这样的:
![CSS属性*-gradient怎么用](https://www.cdcxhl.com/upload/otherpic54/3447.jpg)
其原理也很简单:就是以起始点为中心,然后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数,每个颜色值后可以跟两个百分比,为当前颜色值的起始点和终止点(中间用空格隔开):
![CSS属性*-gradient怎么用](https://www.cdcxhl.com/upload/otherpic54/3448.jpg)
background: conic-gradient(pink 0 30%, yellow 0 70%, lime 0 100%);
还可以分开来写:
background: conic-gradient(pink 0, pink 30%, yellow 30%, yellow 70%, lime 70%, lime 100%);
(第二种方式兼容性比第一种好一点)
慢着!上面第二张图片不就是我们想要的吗?
根据图片,我们不难得出下面的代码:
{
width: 200px;
height: 200px;
background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%;
}
But,这里面完全是“静态”的。
我们大概大部分人都用过echarts绘制图形:根据后端传来的数据渲染到echarts的Map对象的指定参数(数组)中就能得到一个符合要求的不同颜色显示的圆饼图了。这用CSS怎么做呢?
我们当然要借助JS的帮助 —— 因为CSS3推出了 自定义变量,它可以很好的让css属性与JavaScript变量相结合:
经过探索,目前比较好的实践应该就是给gradient的颜色开始与结束位置设置为自定义变量,然后当JavaScript拿到数据后通过改变其值从而改变圆饼图中的颜色分布!
放一个以前写过的演示demo:
:root{
--zero:0;
--one:50%;
}
.circle{
width: 300px;
height: 300px;
border-radius: 50%;
/* background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red); */
background: conic-gradient(red var(--zero) var(--one),yellow var(--one) 100%);
}