css 不规则形渐变色

css 不规则形渐变色

More and more websites use gradients in one way or another. Some websites use them for navigation components, while others use them in elements like buttons, or with images to create some nice effects.

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

All browsers have had support for basic CSS linear and radial gradients for a long time now. The CSS Gradients: A Syntax Crash Course article on SitePoint gives you a quick summary of the syntax required to create linear and radial gradients, as well as how to use repeating gradients to create some basic patterns, which is great if you care about web performance and try to avoid using images whenever possible.

长期以来，所有浏览器都已经支持基本CSS线性和径向渐变。 有关SitePoint的CSS渐变：语法崩溃课程的文章，为您提供了创建线性和径向渐变所需的语法的快速摘要，以及如何使用重复渐变创建一些基本模式，如果您关心网络性能，那将是一个很好的选择并尽量避免使用图片。

After linear and radial gradients, browsers are now slowly starting to support conic gradients, which were first championed by Lea Verou.

在经历了线性和径向渐变之后，浏览器现在逐渐开始支持圆锥形渐变，该渐变最初由Lea Verou倡导 。

In this article, you will learn about the syntax, uses, and browser support for simple conic gradients and repeating conic gradients.

在本文中，您将了解简单圆锥曲线渐变和重复圆锥曲线渐变的语法，用法和浏览器支持。

什么是圆锥渐变？ (What are Conic Gradients?)

Conic and radial gradients are similar in the sense that both of them start from a specified or default point as the center of the circle used to draw them. The difference between the two is that, in the case of radial gradients the color-stops are placed along the radial line, while in the case of conic gradients the color stops are placed along the circumference of the circle.

圆锥和径向渐变在它们都从指定点或默认点开始的意义上是相似的，它们是用于绘制它们的圆的中心。 两者之间的区别在于，在径向渐变的情况下，色标沿径向线放置，而在圆锥形渐变的情况下，色标沿圆的圆周放置。

The position of color-stops for a conic gradient can be specified either in terms of percentage or in terms of degrees. A value of 0% or 0deg refers to the top of the conic gradient. The values keep increasing gradually as you move clockwise. A value of 360deg is equivalent to 0deg. Any color whose color-stop value is greater than 100% or 360deg won’t be drawn on the conic gradient but it will still affect its color distribution.

圆锥渐变的色标位置可以用百分比或度数来指定。 0％或0deg的值表示圆锥渐变的顶部。 当您顺时针移动时，这些值将逐渐增加。 360deg的值等于0deg。 任何颜色停止值大于100％或360度的颜色都不会绘制在圆锥渐变上，但仍会影响其颜色分布。

The following image shows a conic gradient that starts with a yellow color and ends with orange.

下图显示了一个圆锥形渐变，该渐变以黄色开始，以橙色结束。

It is hard not to notice the sharp transition that separates the orange at 360deg from the yellow at 0deg. Remember that conic gradients always produce this transition whenever the starting and ending colors of the conic gradient are very different. One way to avoid it is setting the starting and ending color to the same value.

很难不注意到将360度处的橙色与0度处的黄色分隔开的尖锐过渡。 请记住，只要圆锥渐变的开始和结束颜色非常不同，圆锥渐变就总是会产生这种过渡。 避免出现这种情况的一种方法是将开始和结束颜色设置为相同的值。

圆锥渐变的语法 (Syntax for Conic Gradients)

Conic gradients allow you to specify their starting angle as well as their central position. When these values are omitted, the angle defaults to zero and the position defaults to center. Here is the syntax for conic gradients:

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

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

The color-stop angle for the first and last color is assumed to be 0deg and 360deg respectively, if not specified. The yellow-orange conic gradient from the previous section could be created using any of the following versions:

如果未指定，则假定第一种和最后一种颜色的色终止角分别为0度和360度。 上一部分的橙黄色圆锥渐变可以使用以下任何一种版本创建：

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

Instead of using degrees, you could also use percentages. As I have mentioned earlier, a value of 100% is equal to 360deg. So a value of 50% will be equal to 180deg. If you know exactly what part of the circle you want to cover with a specific color, using percentages might be easier. Similarly, the center position of the conic gradient can also be specified in terms of percentages. Any of the above conic gradient values will produce the following result:

除了使用度数，您还可以使用百分比。 正如我之前提到的，100％的值等于360度。 因此50％的值等于180度。 如果您确切地知道要用特定颜色覆盖圆圈的哪一部分，则使用百分比可能会更容易。 类似地，圆锥形渐变的中心位置也可以用百分比指定。 以上任何一个圆锥梯度值都会产生以下结果：

See the Pen Creating a Conic Gradient by SitePoint (@SitePoint) on CodePen.

请参阅在CodePen上由SitePoint( @SitePoint ) 创建圆锥形渐变的钢笔 。

Not all browsers support conic gradients at present, so I will be including a reference image with each example to show what the final result is supposed to look like.

目前并不是所有的浏览器都支持圆锥渐变，因此我将在每个示例中包括一个参考图像，以显示最终结果应该是什么样子。

圆锥渐变的用途 (Uses of Conic Gradients)

You can use conic gradients to create different kinds of color wheels. As an example, the following demo uses the colors of a rainbow in the conic gradient to create a rainbow wheel.

您可以使用圆锥形渐变创建不同种类的色轮 。 例如，以下演示使用圆锥渐变中的彩虹颜色创建彩虹轮。

.wheel { background: conic-gradient(from 90deg, violet, indigo, blue, green, yellow, orange, red, violet); border-radius: 50%; }

Notice how I have set both the start and end color of the conic gradient to violet to avoid sudden transitions.

请注意，我如何将圆锥渐变的开始和结束颜色都设置为紫色，以避免突然过渡。

See the Pen Creating a Conic Gradient – Rainbow Wheel by SitePoint (@SitePoint) on CodePen.

见笔创建一个圆锥梯度-彩虹轮由SitePoint( @SitePoint上) CodePen 。

使用CSS圆锥形渐变绘制饼图 (Using CSS Conic Gradients for Pie Charts)

Another benefit of conic gradients is the ability to create pie charts with ease. The process for creating pie charts is actually very simple. All you have to do is provide some hard color-stop values for different colors. Each color of the gradient can be given a start and end angle. When the value of the start angle for the next color is less than or equal to the value of the end angle for the current color, they will display in a very sharp, instantaneous color change resulting in the formation of distinct sectors.

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

There are two ways for specifying these color-stop values. The first one is to always set the start angle for each color to zero.

有两种方法可以指定这些色标值。 第一个是始终将每种颜色的起始角度设置为零。

The second method is to set the start angle of the next color equal to the end angle of the previous color.

第二种方法是将下一个颜色的起始角度设置为等于前一个颜色的终止角度。

What you finally decide to do is a matter of preference.

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

The following code snippet shows the conic gradient value for both these methods side by side for comparison:

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

.pie { background: conic-gradient(#FF5722 0% 35%, #FFEB3B 0% 60%, #2196F3 0% 100%); border-radius: 50%; } .pie { background: conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%); border-radius: 50%; }

You can omit the start angle for your first color and end angle for your last color because they will be set to 0% and 100% respectively by default:

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

See the Pen Creating a Conic Gradient – Pie Charts by SitePoint (@SitePoint) on CodePen.

见笔创建一个圆锥梯度-饼图由SitePoint( @SitePoint上) CodePen 。

使用CSS圆锥形渐变创建甜甜圈图 (Using CSS Conic Gradients to Create Donut Charts)

Creating a donut chart is just a matter of applying an additional radial gradient on your element with hard color-stops. The inner color of the radial gradient can be set to white and the outer portion can be made transparent.

创建甜甜圈图仅需在元素上附加带有硬色标的径向渐变即可。 径向渐变的内部颜色可以设置为白色，外部可以透明。

.donut { background: radial-gradient(white 40%, transparent 41%), conic-gradient(#FF5722 0% 35%, #FFEB3B 35% 60%, #2196F3 60% 100%); border-radius: 50%; }

See the Pen Creating a Conic Gradient – Donut Charts by SitePoint (@SitePoint) on CodePen.

见笔创建一个圆锥梯度-圆环图由SitePoint( @SitePoint上) CodePen 。

重复圆锥渐变 (Repeating Conic Gradients)

A repeating conic gradient accepts all the same values as a regular conic gradient. The only difference is that this time it will keep repeating itself until the whole 360 degrees have been covered. You can use this repetition to create some common image patterns that previously required the use of images.

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

You can easily modify the pie charts to create starburst-like backgrounds. All you have to do is use repeating-conic-gradients and reduce the width of each color segment by a suitable amount.

您可以轻松地修改饼图以创建类似爆炸形的背景。 您所要做的就是使用repeating-conic-gradients ，并将每个颜色段的宽度减小适当的数量。

.starburst { background: repeating-conic-gradient(#fbe462 0% 5%, #fd9c2a 5% 10%); }

Similarly, you can create a checkerboard pattern with ease by setting the width of each sector to be 25% and setting the background-size.

同样，您可以通过将每个扇区的宽度设置为25％并设置background-size轻松创建棋盘格图案。

The following image shows how extending a conic gradient with four 90 degree sectors over a rectangular or square area can create checkerboards:

下图显示了如何在矩形或正方形区域上扩展具有四个90度扇形的圆锥渐变来创建棋盘格：

Here is the CSS to create a checkerboard pattern:

这是用于创建棋盘格图案CSS：

.checker { background: repeating-conic-gradient(#fbe462 0% 25%, #fd9c2a 25% 50%); background-size: 100px 100px; }

See the Pen Repeating Conic Gradient – Checkerboards by SitePoint (@SitePoint) on CodePen.

请参见CodePen上的SitePoint ( @SitePoint )的“笔重复圆锥体渐变–棋盘” 。

You can create many more patterns by varying the size of different sectors as well as changing the from angle for the gradients.

您可以通过改变不同行业的大小以及改变创造更多的模式from角度梯度。

浏览器支持和Polyfill (Browser Support and Polyfills)

At the time of writing this article, conic gradients are supported in Chrome 59+ and Opera 46+ behind the “Experimental Web Platform Features” flag. No other browser supports this new standard, either by default or behind some flag. This means that you will have to wait a little before there is enough browsers support.

在撰写本文时，Chrome 59+和Opera 46+在“ Experimental Web Platform Features”标志下均支持圆锥渐变。 没有其他浏览器默认或在某些标志后面支持此新标准。 这意味着您将需要稍等片刻才能获得足够的浏览器支持。

However, you can start using CSS conic gradients today with the help of an excellent CSS conic-gradient() polyfill created by Lea Verou. There is also a PostCSS Conic Gradient plugin that automatically adds a conic gradient fallback to your CSS files.

但是，今天您可以在Lea Verou创建的出色的CSS conic-gradient() polyfill的帮助下开始使用CSS圆锥渐变。 还有一个PostCSS Conic Gradient插件，可自动向您CSS文件添加一个圆锥体渐变后备。

最后的想法 (Final Thoughts)

This tutorial showed you how to create pie and donut charts using conic gradients. After that, you learned how to create different background patterns using just CSS with the help of repeating conic gradients. Once the browser support is good enough, you will no longer have to rely on large libraries or images to accomplish these tasks.

本教程向您展示了如何使用圆锥形渐变创建饼图和甜甜圈图。 之后，您学习了如何使用CSS在重复圆锥渐变的帮助下创建不同的背景图案。 一旦浏览器支持足够好，您将不再需要依赖大型库或图像来完成这些任务。

To learn more on conic gradients, don’t miss these resources:

要了解有关圆锥渐变的更多信息，请不要错过以下资源：

Lea Verou’s talk for CSSconf EU 2015

Lea Verou在CSSconf EU 2015上的演讲

Conic gradients section in the CSS Image Values and Replaced Content Module Level 4

“ CSS图像值和替换的内容模块级别4”中的“ 圆锥渐变”部分

Lea Verou’s initial draft specification, which dates back to 2011.

Lea Verou的初始规范草案可追溯到2011年。

Can you suggest any unique uses for conic gradients on the web? Let us know in the comments.

您可以建议网络上圆锥形渐变的任何独特用法吗？ 让我们在评论中知道。

翻译自: https://www.sitepoint.com/create-css-conic-gradients-pie-charts/

css 不规则形渐变色