.bg { position: relative; margin: 50px auto; width: 400px; height: 400px; border-radius: 50%; background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%); transform: rotate(-112.5deg); transform-origin: 50% 50%; } .bg::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 370px; height: 370px; border-radius: 50%; background: #fff; } .bg::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%), conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%); } .point { position: absolute; width: 30px; height: 30px; transform: translate(-50%, -50%); left: 50%; top: 50%; background: radial-gradient(#467dc6 0%, #a4c6f3 100%); border-radius: 50%; z-index: 999; } .point::before { content: ""; position: absolute; width: 5px; height: 350px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0); border-radius: 100% 100% 5% 5%; background: linear-gradient( 180deg, #9bc7f6 0, #467dc6 50%, transparent 50%, transparent 100% ); animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite; } @keyframes rotate { 50% { transform: translate(-50%, -50%) rotate(150deg); } 100% { transform: translate(-50%, -50%) rotate(150deg); } }　

为了凸显 conic-gradient 的实用性，简单将二者合二为一，模拟了一下。看看效果，大功告成，所以说 conic-gradient 还是有用武之地的：

CodePen Demo -- 使用 conic-gradient 实现表盘信用分示例

看到这里，想必读者们都跃跃欲试这么神奇的属性。

但是，按照惯例，这种 “高科技” 通常兼容性都不怎么滴。conic-gradient 兼容性又如何呢？

非常惨烈，CSS 官方对其的描述是：

处于修正阶段的模块没有处于改善阶段的模块稳定。通常它们的语法还需要详细审查，说不定还会有很大的变化，而且不保证和之前的兼容。替代的语法通常经过测试并已经实现。

万幸的是，在文章开头我也提到了，感谢 LeaVerou 大神，让我们可以提前使用上这么美妙的属性。

LeaVerou 提供了一个垫片库，按照本文上述的语法，添加这个垫片库，就可以开心的使用起来啦。

polyfill 是一个开发术语，在 Web 开发中，polyfill 垫片库的准确意思为：用于实现浏览器并不支持的原生API的代码。现在引申为实现浏览器并不支持的某些功能的兼容库。

你需要添加如下的 JS ，垫片库会按照 CSS 语法，生成对应的圆锥渐变图案，并且转化为 BASE64 代码：

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

因为垫片库的作用是将我们的 CSS 语法转化成为 BASE64 代码替换 background-image: url() 中的内容，所以，上线后是不需要再添加这两个库的。

CSS conic-gradient() polyfill

系列 CSS 文章汇总在我的 Github 。

好了，本文到此结束，希望对你有帮助 :)

如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。