芒果团子的博客

新鲜接触：css3的conic-gradient，圆锥渐变

字数统计: 352阅读时长: 1 min
2018/10/19 Share

圆锥渐变

圆锥渐变始于指定的圆的中心，类似于径向渐变，按照顺时针方向绕中心实现渐变效果。可以指定渐变的角度、渐变的中心、渐变的颜色列表。

线性渐变与径向渐变通过指定长度来控制停止颜色，圆锥渐变指定角度。

1
2
3
4
5
6
7
8
.conic-gradient{
    background: conic-gradient(from 30deg at 50% 30%, white, black 60%, gray 80%);
}
// 语法
conic-gradient(form <angle> at <position>, angular-color-stop-list)
// angle：旋转的角度，可省略，默认为0deg。
// position：渐变的中心，可省略，默认center。
// angular-color-stop-list：渐变的颜色列表，颜色角度超出0~360，超出的部分不会直接绘制，但是会影响渐变部分的颜色。

两种指定旋转角度的方式：

1
2
3
4
5
6
7
8
.conic-gradient{
    background: conic-gradient(from 45deg at center, white, black, white);
}

.conic-gradient{
    background: conic-gradient(hsl(0,0%,87.5%), white 45deg, black 225deg, hsl(0,0%,87.5%));
}
//

调色盘例子：

1
2
3
4
5
.conic-gradient{
    background: radial-gradient(gray, transparent),conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    border-radius: 50%;
    width: 200px; height: 200px;
}

纯色块饼状图：

1
2
3
4
5
6
.conic-gradient{
    background: conic-gradient(yellowgreen 0, yellowgreen 40%, gold 40%, gold 75%, pink 75%, pink 100%);
    // 或者 background: conic-gradient(yellowgreen 40%, gold 0deg 75%, pink6 0deg); 测试出现提示该值不可用，chrome版本 69.0.3497.100
    border-radius: 50%;
    width: 200px; height: 200px;
}

重复圆锥渐变

1
2
3
.repeating-conic-gradient{
  background: repeating-conic-gradient(gold, #f06, 20deg);
}

原文作者：sylvanas

原文链接：https://sylvanase.github.io/2018/10/19/新鲜接触：css3的conic-gradient/

发表日期：October 19th 2018, 2:03:04 pm

更新日期：October 10th 2018, 11:46:24 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 圆锥渐变
  2. 2. 重复圆锥渐变
Total : 14
Invalid date
2018
Invalid date
2018
Invalid date
Invalid date
2018
Invalid date
Invalid date