CSS圆锥渐变

圆锥形渐变类似于径向渐变 。 两者均为圆形，并使用元素的中心作为色标的源点。 但是，如果径向渐变的色标从圆的中心出现，则圆锥渐变会将它们放置在圆周围。

说明圆锥（左）和径向（右）梯度之间的差异。

之所以称它们为“圆锥形”，是因为它们看起来像是从上方观察的圆锥形。 好吧，至少当提供一个不同的角度并且颜色值之间的对比度足够大时，才能分辨出差异。

圆锥形渐变不包含在CSS Level 3的原始CSS渐变中，但包含在Level 4的CSS Image Values和Replaceed Content规范中，在撰写本文时，该规范目前正在起草中。

句法

用普通英语更容易理解圆锥曲线语法：

制作一个位于[某点]的圆锥形渐变 ，该渐变以[某种 颜色]开始在某个角度处，然后以[[另一种颜色]]在[某个角度]下结束。

官方规范看起来像这样：

conic-gradient() = conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

在最基本的水平上，它看起来像这样：

.conic-gradient {
  background: conic-gradient(#fff, #000);
}

…假定渐变的位置从元素的最中心开始（ 50% 50% ），并且均匀分布在白色和黑色值之间。

我们本可以用其他几种方式编写的，所有这些都是有效的：

.conic-gradient {
  /* Original example */
  background-image: conic-gradient(#fff, #000);
  /* Explicitly state the location center point */
  background: conic-gradient(at 50% 50%, #fff, #000);
  /* Explicitly state the angle of the start color */
  background: conic-gradient(from 0deg, #fff, #000);
  /* Explicitly state the angle of the start color and center point location */
  background: conic-gradient(from 0deg at center, #fff, #000);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background: conic-gradient(#fff 0%, #000 100%);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background: conic-gradient(#fff 0deg, #000 1turn);
}

如果我们不为颜色指定一个角度，则假定梯度颜色各半，起始于0deg和结束360deg 。 这种创建了一个硬的停止，在停止时颜色在0deg和360deg 。 如果我们的起始颜色将从圆上的其他位置开始，例如90deg度处的距离的四分之一，那么这将创建一个更平滑的渐变，并且我们开始获得那种酷似圆锥形的透视图。

.conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}

指定旋转角度（右）可创建更平滑的渐变。

我们可以玩圆锥形渐变。 例如，我们可以使用它来创建您可能在拾色器或臭名昭著的Mac旋转沙滩球指示器中看到的相同图案：

.conic-gradient {
  background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
}

模拟圆锥形渐变色轮模式的样机

或者，让我们通过在三个颜色值之间添加硬停止来尝试一个简单的饼图：

.conic-gradient {
  background: conic-gradient(lime 40%, yellow 0 70%, red 0);
}

演示模拟简单三色饼图的圆锥渐变的样机

浏览器支持

它目前是CSS图像和4级替换内容模块规范的一部分，该标准正在起草中。 同时，Lea Verou（为该规范做出了贡献） 提供了可以使它们成为可能的polyfill。

该浏览器支持数据来自Caniuse ，其更多信息。 数字表示浏览器支持该版本及更高版本的功能。

桌面

铬	火狐浏览器	IE浏览器	边缘	苹果浏览器
69	没有	没有	79	12.1

手机/平板电脑

Android Chrome浏览器	Android Firefox	安卓系统	iOS Safari
81	没有	81	12.2-12.4

其他资源

• CSS图像和替换的内容模块4级 ：：这是引入圆锥形渐变的官方规范。
• CSS中的圆锥形渐变 ：2013年以来关于该主题CSS技巧文章，上面有一些很棒的示例。
• 圆锥渐变Polyfill ： Lea Verou创建了一个Polyfill ，可以在正式发布之前实现圆锥渐变。

翻译自: https://css-tricks.com/snippets/css/css-conic-gradient/