CSS conic-gradient() 函数

CSS conic-gradient() 语法

在 CSS 中，conic-gradient() 函数用于创建一个锥形渐变（也称为 “角度渐变” ）。所谓的 “锥形渐变”，指的是以一个中心点为基准，颜色沿着圆周方向的渐变。

语法：

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

说明：

conic-gradient() 函数接收以下参数。

from angle（可选）：用于定义渐变的起始角度，默认为 0deg（12 点钟方向）。
at position（可选）：用于定义渐变的中心点，默认为 center（元素的中心）。
color-stop1, color-stop2, ...（必选）：定义颜色停止点，即渐变中的颜色及其位置。我们可以指定每个颜色的具体角度（如 0deg）或百分比（如 50%）。例如，red 0deg, blue 90deg 表示红色从 0deg 开始，蓝色从 90deg 开始。

对于 conic-gradient() 函数，小伙伴们还需要清楚以下几点：

锥形渐变是围绕中心点顺时针旋转的，角度从 0deg 开始。我们可以通过调整角度，来改变颜色的分布和渐变的方向。
conic-gradient() 支持使用透明度（如 rgba() 或 transparent），这样我们可以创建带有透明效果的渐变，比如：

background: conic-gradient(rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));

conic-gradient() 可以与其他 CSS 函数（如 var()、calc()）结合使用，从而动态调整渐变效果，比如：

background: conic-gradient(from 90deg, var(--color1), var(--color2));

如果没有指定每个颜色的停止位置，那么颜色将均匀地分布在 0deg 到 360deg 之间。
我们可以指定两个或多个颜色停止点来创建更加复杂的渐变效果，增加渐变的层次感，比如：

background: conic-gradient(from 0deg, red, yellow 90deg, green 180deg);

注意: conic-gradient() 只能作为 background 或 background-image 的值，而不能作为 background-color 的值。

CSS conic-gradient() 摘要

属于	CSS 函数
使用频率	低
兼容性	查看
官方文档	查看
MDN	查看

CSS conic-gradient() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS conic-gradient() 函数是如何使用的。

示例 1：conic-gradient() 实现锥形渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: conic-gradient(red, yellow, blue);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

conic-gradient() 实现锥形渐变

分析：

conic-gradient(red, yellow, blue) 表示创建一个依次从 red、yellow、blue 的锥形渐变，并且颜色均匀分布在 0deg 到 360deg 之间。

对于这个例子来说，锥形渐变以 div 元素的中心为基准，然后顺时针旋转，最终会形成色轮效果。

示例 2：conic-gradient() 实现指定角度的锥形渐变

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: conic-gradient(from 45deg, red 0deg, yellow 90deg, blue 180deg, green 360deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

conic-gradient() 实现指定角度的锥形渐变

分析：

background: conic-gradient(from 45deg, red 0deg, yellow 90deg, blue 180deg, green 360deg);

对于上面这句代码来说，from 45deg 表示将渐变起始角度设置为 45 度，然后颜色会从红（0deg）渐变到黄（90deg）、蓝（180deg）和绿（360deg）。

通过给 conic-gradient() 指定不同的角度，可以实现更精确的颜色渐变效果，适合需要特定方向的视觉效果。

示例 3：conic-gradient() 创建饼图效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 75%, green 75% 100%);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

conic-gradient() 创建饼图效果

分析：

background: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 75%, green 75% 100%);

在这个例子中，conic-gradient() 使用百分比来指定颜色停止点。然后我们结合了 border-radius: 50%，来创建圆形饼图效果。其中，每个颜色占据 90 度（360deg 的 1/4）。

示例 4：conic-gradient() 结合 CSS 变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        :root {
            --color1: #ff0000;
            --color2: #00ff00;
            --color3: #0000ff;
        }
        div {
            width: 200px;
            height: 200px;
            background: conic-gradient(var(--color1), var(--color2), var(--color3));
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

页面效果如下图所示。

conic-gradient() 结合 CSS 变量

分析：

在这个例子中，我们定义了 3 个 CSS 变量：--color1、--color2 和 --color3。然后，使用 conic-gradient() 动态引用红、绿、蓝这 3 种颜色来生成锥形渐变。