Yujie

初试 “圆锥渐变”

1818 words, 6 minutes to read

CSS3 conic-gradient 圆锥渐变

感谢 LeaVerou 大神，让我们可以提前使用上这么美妙的属性。

conic-gradient 是什么？说到 conic-gradient ，就不得不提的它的另外两个兄弟：

这两种渐变应该有很多人使用过的，CSS3 的线性渐变及径向渐变给 CSS 世界带来了很大的变化。而 conic-gradient ，表示圆锥渐变，是另外一种渐变方式，给 CSS 世界带来了更多可能，CSS 渐变也会变得越来越好。

先看一些例子

<div class="demo"></div>

.demo {
  width: 200px;
  height: 200px;
  background: conic-gradient(#f06, gold);
}


<div class="demo"></div>

.demo {
  width: 200px;
  height: 200px;
  background: conic-gradient(#eee .1turn, black, #eee 326deg);
}


<div class="demo"></div>

.demo {
  width: 200px;
  height: 200px;
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  border-radius: 50%
}


<div class="demo"></div>

.demo {
  width: 200px;
  height: 200px;
  background: #0ac
  repeating-conic-gradient(hsla(0,0%,100%,.2) 0 15deg, hsla(0,0%,100%,0) 0 30deg);
}


<div class="demo"></div>

.demo {
  width: 200px;
  height: 200px;
  background: conic-gradient(black 25%, white 0 50%, black 0 75%, white 0);
  background-size: 4em 4em;
}

与线性渐变及圆锥渐变的异同

那么它和另外两个渐变的区别在哪里呢？

而从方向上来说，圆锥渐变的方向是这样的：

从上边的例子中可以看到，圆锥渐变的渐变方向和起始点。起始点是图形中心，然后以顺时针方向绕中心实现渐变效果。

兼容性

conic-gradient polyfill 垫片库

大家是不是都跃跃欲试这么神奇的属性。

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

CSS 官方对其的描述是：

处于修正阶段的模块(Modules in the revising phase)

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

但是，再次感谢 LeaVerou 大神，让我们可以提前使用上这么美妙的属性。

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

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

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

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

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

参考文献：

CSS conic-gradient() polyfill