CSS 函数 - repeating-conic-gradient（）

在 CSS 中，函数 repeating-conic-gradient（） 可用于创建包含重复渐变的图像，其中颜色过渡围绕中心点旋转。生成的图像是 <gradient> 数据类型的特殊图像。

概述

当第一个色标和最后一个色标都不包含大于 0 度或小于 360 度的色标角时，圆锥渐变将不会重复。
圆锥渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
图像的大小将与它适用的元素的大小或图像的大小匹配。
<gradient>数据类型只能在使用 <image> 的地方使用。
conic-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。
为了创建一个不会重复的圆锥梯度，你需要使用CSS函数conic-gradient（），或者使梯度成为一个完整的360度旋转。

可能的值

函数 repeating-conic-gradient（） 可以将以下值作为参数：

1、<angle>：值指定顺时针方向的梯度旋转。将值作为角度，并在关键字 from 之前。

2、<position>：

确定渐变的中心。
使用与 background-position 属性相同的长度、顺序和关键字。
如果未指定任何值，则设置的默认值为 center。

3. <angular-color-stop>：由色标的 <color> 值以及一个或两个可选的停止位置值组成，该值是沿渐变圆周轴的角度。重复渐变的大小由最后一个色标减去第一个色标角确定。

4. <color-hint>：确定相邻色标之间的渐变进程。如果未指定值，则颜色过渡的中点是两个色标之间的中点。

语法


repeating-conic-gradient([from angle] [at position,] color degree, color degree, ...);

了解重复圆锥梯度

repeating-conic-gradient 的语法类似于 conic-gradient 和 repeating-radial-gradient。色标围绕渐变弧放置。圆锥渐变的重复截面的大小等于从最后一个色标的角度减去第一个色标。

要使圆锥渐变重复，您需要指定第一个和最后一个色标。色标位于圆的圆周周围，而不是位于从渐变中心开始的渐变线上。

颜色过渡发生在圆心周围，从顶部开始（当指定了 <angle>时），并按顺时针方向进行。
圆锥渐变是通过指示旋转角度、渐变中心，最后指定色标列表来定义的。
色标是使用角度值放置的，这与给出长度和百分比值的线性和径向渐变不同。
用于指定值的单位是 deg 表示度数，grad 表示梯度，rad 表示弧度，turn 表示转数。有 360 度、400 个梯度、2 个饼弧度和 1 个圆圈。
梯度的 position 值类似于 2 值 background-position 的语法。
梯度的周长是梯度的弧。梯度的起点是中午 12：00 或北部。梯度的旋转由顺时针方向的起始角度确定。
倾斜的颜色停止点，它们的起点和结束点，决定了渐变的颜色。使用相邻颜色的颜色停止点之间的颜色提示，您可以更改颜色之间的过渡。

支持重复圆锥梯度的浏览器接受百分比值，其中 100% 等于 360 度。

渐变定制

可以通过多种方式自定义渐变。您可以在渐变弧上添加更多有角度的色标点，使用 <angle> 更改色标的位置，通过颜色提示将颜色过渡中点移动到两个色标之间的任何点等。
如果未定义色标的位置，则它位于色标之前的位置和色标之后的色标之间。
如果未为第一个或最后一个色标指定角度，则值将分别为 0 度和 360 度。
当没有为它们中的任何一个定义角度时，结果就是圆锥梯度。
当为第一个或最后一个色标指定了非 0 或 360 度值时，渐变将根据指定的值重复。
默认情况下，一个色标的颜色将平滑过渡到后续色标的颜色。
通过添加颜色提示，可以将颜色过渡中点移动到两个色标之间的任何点。
当两个或多个色标位于同一位置时，第一个色标和最后一个色标之间的颜色过渡将是硬线。

建议不要混搭不同的角度单位，以创建重复圆锥渐变，因为这会使 CSS 难以读取它。

可访问性问题：辅助技术没有太多关于背景图像的特殊信息，因为浏览器不提供它们。圆锥梯度反射的图像不会被屏幕阅读器读取或读出。因此，如果图像列出了关键信息，建议从语义上描述它。

CSS repeating-conic-gradient（） - 角度值

下面是一个重复圆锥渐变的示例，其中定义了起始角度以及色标及其以度为单位的值：


<html>
<head>
<style>
	 	div {
	 	 	 height: 150px;
	 	 	 width: 150px;
	 	}

	 	.repeat-conic-gradient {
	 	 	 background: repeating-conic-gradient(
	 	 	 from 0deg,	
	 	 	 blue 0deg 45deg,	
	 	 	 lightgreen 45deg 60deg);
	 	}
</style>
</head>
<body>
	 	<h1>Repeating Conic Gradient</h1>
	 	<div class="repeat-conic-gradient"></div>
</body>
</html>

CSS repeating-conic-gradient（） - 带有星爆

下面是一个重复圆锥梯度的示例，带有红色和黑色的星暴：


<html>
<head>
<style>
	 	div {
	 	 	 height: 200px;
	 	 	 width: 400px;
	 	}

	 	.repeat-conic {
	 	 	 background-image: repeating-conic-gradient(red 0 19deg, black 19deg 28deg);
	 	}
</style>
</head>
<body>
	 	<h1>Repeating conic gradient</h1>
	 	<div class="repeat-conic"></div>
</body>
</html>

打印本页