奇怪的知识又增加了 ? css属性 conic-gradient


conic-gradient 是啥

以下是mdn原文

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels. The result of the conic-gradient() function is an object of the data type, which is a special kind of .

大概意思 就是锥形渐变 返回值是一种特殊的图片格式

兼容性不好 ?? 没关系 好玩就可以了
在这里插入图片描述

奇奇怪怪的画出一个饼图 ??

在这里插入图片描述

1
2
3
4
5
6
7
    .piegraph {
        display: inline-block;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background-image: conic-gradient(yellow 0,red 90deg,blue 180deg,green 270deg,yellow 360deg);
      }

在这里插入图片描述

1
2
3
4
5
6
7
.piegraph {
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: conic-gradient(yellow 0 90deg,red 90deg 180deg,blue 180deg 270deg,green 270deg 360deg);
  }

在这里插入图片描述

1
2
3
4
5
6
7
.piegraph {
    display: inline-block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: conic-gradient(from 0 at 25% 25% , yellow 0 90deg ,red 90deg 180deg,blue 180deg 270deg,green 270deg 360deg);
  }