CSS 函数 - conic-gradient（）

上一页
下一页

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

给出的名称是圆锥形的，因为图像从上方看起来像一个圆锥体，因为一侧的颜色停止比另一侧浅。

概述

  • 圆锥渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
  • 图像的大小将与它适用的元素的大小或图像的大小匹配。
  • <gradient>数据类型只能在使用 <image> 的地方使用。
  • conic-gradient（） 函数不能与 <color> 数据类型和 background-color 等属性一起使用。
  • 为了创建一个自我重复的圆锥梯度，您需要使用 CSS 函数 repeating-conic-gradient（） 来填充 360 度旋转。

可能的值

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

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

2、<position>：

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

3. <angular-color-stop>：由色标的 <color> 值以及一个或两个可选的停止位置值组成，该值是沿渐变圆周轴的角度。

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

语法


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

CSS conic-gradient（） - 组成

圆锥渐变是两种或多种颜色围绕渐变弧（圆的周长）的渐进过渡，而不是在从渐变中心开始的渐变线上。

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

CSS conic-gradient（） - 定制

可以通过多种方式自定义渐变。您可以在渐变弧上添加更多倾斜的色标点，使用<角度>更改色标的位置，通过颜色提示将颜色过渡中点移动到两个色标之间的任何点等。

色标列表应按升序排列。值较低的后续色标将覆盖前一个色标的值，从而导致硬过渡。

不仅可以使用圆形图形，还可以使用圆锥渐变创建棋盘。

CSS conic-gradient（） - 基本示例

为了创建基本的圆锥渐变，您只需要两种颜色。默认情况下，梯度的中心位于 50% 50% 标记处;随着梯度的开始，梯度朝上。让我们看一个例子：


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

	 	.basic-conic-gradient {
	 	 	 background: conic-gradient(red, yellow);
	 	 	 border-radius: 50%;
	 	}
</style>
</head>
<body>
	 	<h1>Basic Conic Gradient</h1>
	 	<div class="basic-conic-gradient"></div>
</body>
</html>

CSS conic-gradient（） - 中心位置

圆锥梯度的中心可以使用关键字项、百分比或绝对长度进行定位，关键字位于。让我们看一个例子：


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

	 	.position-center-gradient {
	 	 	 background: conic-gradient(at 0% 20%, red 10%, gold 40%, green 50%);
	 	}
</style>
</head>
<body>
	 	<h1>Position Center Gradient</h1>
	 	<div class="position-center-gradient"></div>
</body>
</html>

CSS conic-gradient（） - 角度变化

以下是角度变化的示例。


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

	 	.angle-change-gradient {
	 	 	 background: conic-gradient(from 35deg, red 10%, gold 50%, green 75%, lightgreen);
	 	 	 border-radius: 30%;
	 	}
</style>
</head>
<body>
	 	<h1>Angle Change Gradient</h1>
	 	<div class="angle-change-gradient"></div>
</body>
</html>

有关conic-gradient（）的更多示例，请单击此处。

打印本页
上一页
下一页