CSS 圆锥渐变


目录

    显示目录


CSS 圆锥渐变

圆锥渐变是一种颜色过渡围绕中心点旋转的渐变。

要创建圆锥渐变,您必须定义至少两种颜色。

句法

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

默认情况下,角度为 0deg,位置 为中心。

如果没有指定度数,颜色将均匀分布 中心点。


圆锥渐变:三种颜色

以下示例显示了具有三种颜色的圆锥渐变:

例子

具有三种颜色的圆锥渐变:

   #grad {
  background-image: conic-gradient(red, yellow, green);
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Conic Gradient - Three Colors</h1>

<div id="grad1"></div>

</body>
</html>



圆锥渐变:五种颜色

以下示例显示了具有五种颜色的圆锥渐变:

例子

具有五种颜色的圆锥渐变:

   #grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>

<h1>Conic Gradient - Five Colors</h1>

<div id="grad1"></div>

</body>
</html>



圆锥渐变:三种颜色和度数

以下示例显示了具有三种颜色和每种颜色的度数的圆锥渐变:

例子

具有三种颜色和每种颜色的度数的圆锥渐变:

   #grad {
  background-image: conic-gradient(red 45deg, yellow 
    90deg, green 210deg);
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>

<h1>Conic Gradient - Defined degree for each color</h1>

<div id="grad1"></div>

</body>
</html>




创建饼图

只需添加 border-radius: 50% 即可使圆锥曲线渐变看起来像一个饼图:

例子

   #grad {
  background-image: conic-gradient(red, yellow, green, blue, 
    black);
  
    border-radius: 50%;
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="grad1"></div>

</body>
</html>


这是另一个饼图,其中定义了所有颜色的度数:

例子

   #grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 
    180deg, green 180deg, green 270deg, blue 270deg);
  
    border-radius: 50%;
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

<div id="grad1"></div>

</body>
</html>



指定角度的圆锥曲线

[from angle] 指定整个圆锥曲线梯度的角度 旋转了.

以下示例显示了起始角为 90 度的圆锥渐变:

例子

具有起始角的圆锥曲线:

   #grad {
  background-image: conic-gradient(from 90deg, red, yellow, 
    green);
} 

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a from angle</h1>

<div id="grad1"></div>

</body>
</html>



具有指定中心位置的圆锥渐变

[at position] 指定圆锥曲线渐变的中心。

以下示例显示了中心位置为 60% 45% 的圆锥渐变:

例子

具有指定中心位置的圆锥曲线渐变:

   #grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, 
    green);
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a specified center position</h1>

<div id="grad1"></div>

</body>
</html>



重复圆锥曲线

repeating-conic-gradient() 函数用于重复圆锥曲线梯度:

例子

重复的圆锥曲线梯度:

   #grad {
  background-image: 
repeating-conic-gradient(red 10%, yellow 20%);
  
    border-radius: 50%;
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient</h1>

<div id="grad1"></div>

</body>
</html>


这是一个重复的圆锥渐变,具有定义的颜色起点和颜色终点:

例子

具有定义的颜色起点和颜色终点的重复圆锥曲线渐变:

   #grad {
  background-image: 
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  
    border-radius: 50%;
} 

自己尝试一下→

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient with color-starts and -stops</h1>

<div id="grad1"></div>

</body>
</html>



CSS 渐变函数

下表列出了 CSS 渐变函数:

conic-gradient()

创建圆锥曲线渐变。定义至少两个 颜色(围绕中心点)

linear-gradient()

创建线性渐变。定义至少两个 颜色(从上到下)

radial-gradient()

创建径向渐变。定义至少两个 颜色(中心到边缘)

repeating-conic-gradient()

重复圆锥曲线

repeating-linear-gradient()

重复线性渐变

repeating-radial-gradient()

重复径向渐变