CSS3 渐变方法

css 圆锥渐变效果

使用

1 引入脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>

2 可以创建的对象直接生成svg元素

var gradient = new ConicGradient({
    stops: "gold 40%, #f06 0", // required
    repeating: true, // Default: false
    size: 400 // Default: Math.max(innerWidth, innerHeight)
});

console.log(gradient.svg); // SVG markup
console.log(gradient.png); // PNG image (fixed dimensions) as a data URL
console.log(gradient.dataURL); // data URL
console.log(gradient.blobURL); // blog URL

3 生成的图像效果会自动调节像素分辨率和图像大小，不需要手动设置大小参数，这样做的好处是为了优化图像效果。

特性

1 颜色正态化分布

2 实现了conic-gradient() 和  repeating-conic-gradient()的支持

3 背景大小完全自动填充

4 支持双定位语法

出处 :http://leaverou.github.io/conic-gradient/