如何为饼图创建CSS圆锥梯度以及更多-css教程-PHP中文网

首页

web前端

css教程

如何为饼图创建CSS圆锥梯度以及更多

Joseph Gordon-Levitt

Feb 16, 2025 pm 12:08 PM

如何为饼图创建CSS圆锥梯度以及更多

钥匙要点

圆锥梯度开始获得浏览器支持，可用于创建诸如饼图和颜色轮子之类的效果。它们与径向梯度不同，在该颜色停止沿圆的周长，而不是径向线。
圆锥梯度的语法允许规范起点和中心位置。如果省略，这些默认值分别为零和中心。如果未指定，则假定第一个和最后一个颜色的颜色 - 停止角度为0DEG和360DEG。
圆锥梯度可用于通过为不同颜色提供硬色 - 停止值来创建饼图。可以给出梯度的每种颜色的起点和末端角度，从而导致不同的部门的形成。有两种指定这些颜色停止值的方法：将每种颜色的启动角度设置为零，或将下一个颜色的起始角度等于上一个颜色的末端角度。
>

越来越多的网站以一种或另一种方式使用梯度。一些网站将它们用于导航组件，而另一些网站则将其用于按钮等元素，或者使用图像创建一些不错的效果。

所有浏览器已经很长时间以来都支持基本CSS线性和径向梯度。 CSS梯度：SitePoint上的语法速效课程文章可让您快速摘要创建线性和径向梯度所需的语法，以及如何使用重复梯度创建一些基本模式，如果您关心Web性能，这很棒并尽可能避免使用图像。

> 在线性和径向梯度之后，浏览器现在慢慢开始支持圆锥梯度，这是Lea Verou首先倡导的。

在本文中，您将了解有关简单圆锥梯度和重复圆锥梯度的语法，使用和浏览器的支持。

什么是圆锥梯度？

> 从指定的或默认点开始，作为绘制它们的圆的中心，它们都从指定的或默认点开始，

圆锥梯度和径向梯度相似。两者之间的区别在于，在径向梯度的情况下，颜色挡块沿着径向线放置，而在圆锥梯度的情况下，颜色停止沿圆的圆周放置。

>可以根据百分比或程度指定圆锥梯度的颜色挡位置。 0％或0DEG的值是指圆锥梯度的顶部。当您顺时针移动时，值会逐渐增加。 360兆位的值等于0DEG。任何颜色停止值大于100％或360级的颜色都不会在圆锥梯度上绘制，但仍会影响其颜色分布。

>以下图像显示了一个圆锥梯度，该圆锥梯度以黄色开头，并以橙色结尾。

很难不注意到将橙色在360摄氏度与0deg的黄色分开的急剧过渡。请记住，每当圆锥梯度的启动和结束颜色都大不相同时，圆锥梯度总是会产生这种过渡。避免这种情况的一种方法是将启动和结束颜色设置为相同的值。>

圆锥梯度的语法

圆锥梯度允许您指定其起始角度及其中心位置。当省略这些值时，角度默认为零，位置默认为中心。这是圆锥梯度的语法：

如果未指定，则假定第一个和最后一个颜色的颜色平角分别为0deg和360度。可以使用以下任何版本创建上一节的黄色橙色圆锥梯度：>

而不是使用学位，也可以使用百分比。正如我之前提到的，100％的值等于360度。因此50％的值将等于180度。如果您确切地知道要用特定颜色覆盖的圆圈的哪一部分，则使用百分比可能会更容易。同样，也可以根据百分比指定圆锥梯度的中心位置。上述任何圆锥梯度值都将产生以下结果：

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

请参阅codepen上的sitepoint（@sitepoint）创建圆锥梯度的笔

并非所有浏览器当前都支持圆锥梯度，因此我将在每个示例中包含一个参考图像，以显示最终结果应该是什么样的。

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

使用圆锥梯度

>您可以使用圆锥梯度来创建不同种类的颜色轮毂。例如，以下演示使用圆锥梯度中彩虹的颜色来创建彩虹轮。

请注意，我如何将圆锥梯度的起始和末端颜色设置为紫罗兰色，以避免突然过渡。

请参阅Codepen上的SitePoint（@sitepoint）的圆锥梯度的笔 -

使用CSS圆锥梯度进行饼图

圆锥梯度的另一个好处是能够轻松创建饼图的能力。创建饼图的过程实际上非常简单。您所要做的就是为不同颜色提供一些硬颜色停止值。梯度的每种颜色都可以开始和末端角度。当下一种颜色的起始角值小于或等于当前颜色的末端角度值时，它们将以非常清晰，瞬时的颜色变化显示，从而形成不同的扇区。

有两种指定这些颜色停止值的方法。第一个是始终将每种颜色的启动角度设置为零。

第二种方法是设置下一个颜色的启动角，等于上一个颜色的末端角度。

您最终决定要做的是偏好问题。

以下代码段显示这两种方法并排的圆锥梯度值以进行比较：

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

>您可以省略最后颜色的第一个颜色和端角的起始角，因为默认情况下它们将分别设置为0％和100％：

请参阅codepen上的sitepoint（@sitepoint）的圆锥梯度的笔 -

上的饼图

使用CSS圆锥梯度创建甜甜圈图

创建甜甜圈图只是用硬色 - 在元素上应用额外的径向梯度的问题。可以将径向梯度的内部颜色设置为白色，并且外部可以使外部透明。

请参阅codepen上的sitepoint（@sitepoint）的圆锥梯度的笔 -

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

上的甜甜圈图表

重复圆锥梯度

重复的圆锥梯度接受与常规圆锥梯度相同的所有值。唯一的区别是，这次将继续重复自己，直到覆盖整个360度为止。您可以使用此重复来创建一些以前需要使用图像的常见图像模式。

>您可以轻松地修改饼图以创建类似Starburst的背景。您所要做的就是使用重复的循环梯度，并将每个颜色段的宽度减少一个合适的量。

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

同样，您可以通过将每个扇区的宽度设置为25％并设置背景大小，从而轻松地创建一个棋盘图案。

>以下图像显示了如何在矩形或方形区域上延伸具有四个90度扇区的圆锥梯度可以创建棋盘：

这是CSS创建棋盘格模式的CSS：

<span>background: conic-gradient(from 0deg at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at center, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(at 50% 50%, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(from 0deg, yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow 0deg, orange 360deg);
</span><span>background: conic-gradient(yellow, orange);</span>

>请参阅codepen上的sitepoint（@sitepoint）的笔重复圆锥梯度。

>您可以通过改变不同扇区的大小以及更改梯度的角度来创建更多模式。

>浏览器支持和polyfills

在撰写本文时，Chrome 59和“实验Web平台功能”标志后面的Opera 46支持Conic梯度。默认情况下或在某些标志后面，没有其他浏览器支持此新标准。这意味着您必须等待一点才能提供足够的浏览器支持。

> 但是，您可以在Lea Verou创建的出色CSS Conic-Gradient（）Polyfill的帮助下，立即开始使用CSS圆锥梯度。还有一个Postcs圆锥梯度插件，该插件会自动将CONIC梯度后备添加到您的CSS文件中。

最终想法

>本教程向您展示了如何使用圆锥梯度创建PIE和DONUT图表。之后，您了解了如何仅使用CSS创建不同的背景模式，并借助重复圆锥梯度。一旦浏览器支持足够好，您将不再需要依靠大型库或图像来完成这些任务。

要了解有关圆锥梯度的更多信息，请不要错过这些资源：>

lea Verou的CSSCONF EU 2015

> CSS图像值中的

圆锥梯度部分，并替换了内容模块4

Lea Verou的初始草稿规范，其历史可追溯至2011年。

>
> CSS圆锥梯度中的颜色停止值至关重要，因为它决定了梯度中每种颜色的位置。它表示为百分比或角度。例如，颜色停止值为25％或90度意味着颜色将分别在圆圈或90度的四分之一结束。操纵这些值可以使您创建唯一的梯度效果。

>如何在圆锥梯度中的颜色之间创建平滑的跃迁？

在圆锥梯度中的颜色之间创建平滑的过渡，您可以使用多个颜色 - 停路值。通过将颜色挡片关闭在一起，您可以在颜色之间创建平滑，逐渐的过渡。颜色段越近，过渡将越平滑。

>我可以使用CSS圆锥梯度创建饼图吗？怎么样？通过设置不同的颜色 - 停止值，您可以创建类似于饼图的不同颜色的部分。然后，您可以使用这些部分来表示不同的数据点。

为什么我的圆锥梯度在某些浏览器中未正确显示？

>并非所有浏览器都支持CSS圆锥梯度。例如，Internet Explorer和Microsoft Edge的某些版本不支持它们。为确保您的渐变在所有浏览器中正确显示，请考虑使用后背背景颜色或多填充。 CSS径向梯度在中心点辐射的梯度产生了从中心点辐射的梯度。要创建径向梯度，您将使用radial-gradient（）函数而不是圆锥级函数。可以使用带有圆锥梯度的CSS变量。这使您可以创建更具动态和灵活的样式。您可以定义具有特定值的CSS变量，然后在圆锥梯度中使用该变量。

>我如何对CSS圆锥梯度进行动画？