数据分析图中常见的饼图,其实可以通过简单的css属性来实现。
您可以以使用 conic-gradient 属性来完成。此属性创建一个由渐变组成的图像,其中设置的颜色过渡围绕中心点旋转。您可以使用以下代码行执行此操作
比如我们创建一个饼图结构
<div class="piechart"></div>
通过conic-gradient属性来控制饼图的分部,其中的
rgb(199, 232, 95) 0% 20%
#2C70DB 50% 90%
分别对应颜色,色块分部区域百分比
颜色可以用16进制和rgb控制,区域从0%~100%
.piechart {
background: conic-gradient(rgb(199, 232, 95) 0% 20%, rgb(96, 139, 43) 20% 50%, #2C70DB 50% 90%,#e3f6fa 90% 100%);
border-radius: 50%;
width: 200px;
height: 200px;
}
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...