重拾CSS，前端样式精读-函数（渐变）

前言

本文收录于CSS系列文章中，欢迎阅读指正

接上篇文章，本文继续分享CSS函数中的渐变函数

基本概念

线性渐变，linear-gradient()

创建由两个或更多颜色组成的直线渐变效果。颜色沿一条直线平滑过渡，可以指定渐变的方向（如角度，左右等）。

径向渐变，radial-gradient()

创建由两个或更多颜色组成的径向渐变效果。颜色从一个点向外圆形扩散，可以设置不同的形状和大小。

圆锥渐变，conic-gradient()

色彩沿圆锥形平滑过渡，通常用于创建像饼图这样的效果，角度是从圆心开始计算的。

重复线性渐变，repeating-linear-gradient()

是linear-gradient()的拓展，渐变是重复的，可以设置渐变的大小和重复的间隔。

重复径向渐变，repeating-radial-gradient()

是radial-gradient()的拓展，渐变是重复的，同样可以设置渐变的大小和重复的间隔。

重复圆锥渐变，repeating-conic-gradient()

是 conic-gradient() 的重复版本，可以用来创建更复杂的角度重复模式。

使用一个例子来展示一下上述渐变的基本用法

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>CSS渐变函数</title>
    <style>
        div {
            color: #fff;
            font-weight: bolder;
            font-size: 20px;
            height: 200px;
            line-height: 200px;
            /* 写个全局的颜色列表 */
            --gradient-color: red, orange, yellow, green, cyan, blue, purple;
        }

        .linear-gradient {
            background: linear-gradient(to right, var(--gradient-color));
            /* 从左到右的线性渐变 */
            padding: 20px;
            text-align: center;
        }

        .radial-gradient {
            background: radial-gradient(circle at center, var(--gradient-color));
            /* 以圆心开始的径向渐变 */
            padding: 20px;

            text-align: center;
        }

        .conic-gradient {
            background: conic-gradient(var(--gradient-color));
            /* 圆锥渐变 */
            padding: 20px;
            text-align: center;
        }

        .repeating-linear-gradient {
            background: repeating-linear-gradient(to right, red 0%, yellow 10%, blue 20%);
            /* 重复的线性渐变 */
            padding: 20px;
            text-align: center;
        }

        .repeating-radial-gradient {
            background: repeating-radial-gradient(circle at center, green 0%, blue 10%, green 20%);
            /* 重复的径向渐变 */
            padding: 20px;
            text-align: center;
        }

        .repeating-conic-gradient {
            background: repeating-conic-gradient(orange 0%, purple 20%);
            /* 重复的圆锥渐变 */
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="linear-gradient">
        线性渐变
    </div>
    <div class="radial-gradient">
        径向渐变
    </div>
    <div class="conic-gradient">
        圆锥渐变
    </div>
    <div class="repeating-linear-gradient">
        重复线性渐变
    </div>
    <div class="repeating-radial-gradient">
        重复径向渐变
    </div>
    <div class="repeating-conic-gradient">
        重复圆锥渐变
    </div>
</body>

</html>

参数详解

linear-gradient

基本用法

线性渐变默认方向是从上到下，至少传入两种颜色，参数可以是关键字、hex值、rgb()、rgba()、hsl()、hsla()等

--gradient-color: red, orange, yellow, green, cyan, blue, purple;
background: linear-gradient(var(--gradient-color));

位置

线性渐变的第一个参数支持传入，表示渐变线的起始点位置；可以指定单个方向，如：to top、to bottom、to left 和 to right，或者一个指定水平位置（left 或 right），另一个指定竖直位置（top 或 bottom），如：toleft top、tobottom right等

.linear-gradient-direct {
    background: linear-gradient(to rightbottom, lightblue, lightcoral);
}
<div class="linear-gradient-direct">
    线性渐变方向
</div>

角度

和方向参数一样，线性渐变支持使用角度“>参数，表示渐变线的方向的角度。上述的to top、to bottom、to left 和 to right 分别等价于 0deg、180deg、270deg 和 90deg

.linear-gradient-angled {
    background: linear-gradient(70deg, blue, pink);
}
<div class="linear-gradient-angled">
    线性渐变角度
</div>

色标

色标指的是渐变色带中特定颜色的位置。每个颜色可以跟一个位置值（百分比或具体长度），表示颜色应开始过渡的点。语法是linear-gradient( |)

.linear-gradient-step {
    background: linear-gradient(lightcoral 8vw, lightgreen 85%);
}

上述代码表示红色的色标在渐变轴线的位置是根据窗口判断的，在8vw位置，绿色在高度85%的位置，这之间的颜色会平滑过渡。

<div class="linear-gradient-step">
    线性渐变色标
</div>

代码中的渐变色阶会根据窗口大小改变位置

插值

默认情况下，渐变会平滑地从一种颜色过渡到另一种颜色。那么在哪一个位置开始过渡就由插值决定，它定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。和色标不同，色标是指颜色占比，而插值是渐变的位置。语法是在两个颜色直接输入对应的长度，如：linear-gradient(, |,)

.linear-gradient-hint {
    background: linear-gradient(lightcoral, 20%, lightgreen);
}
<div class="linear-gradient-hint">
    线性渐变插值
</div>

硬线

硬线可以使渐变中两种颜色之间没有平滑过渡，而是有一个明确的颜色界限。通过设置连续两个颜色停靠点到相同位置来实现

.linear-gradient-striped {
    background: linear-gradient(lightcoral 25%, lightblue 25% 50%, lightgreen 50% 75%, lightcyan 75%);
}
/* 等价于 */
.linear-gradient-striped {
    background: linear-gradient(lightcoral 25%, lightblue 25%, lightblue 50%, lightgreen 50%, lightgreen 75%, lightcyan 75%);
}
<div class="linear-gradient-striped">
    线性渐变硬线
</div>

叠加

在一个线性渐变中，可以叠加多个颜色。每个颜色可以单独指定位置，这意味着可以控制颜色过渡的开始和结束位置。将颜色设置成透明或者设置透明度可以显示多层渐变

.linear-gradient-stacked {
    background: linear-gradient(transparent, lightgreen), linear-gradient(lightblue, transparent);
}
<div class="linear-gradient-stacked">
    线性渐变叠加
</div>

radial-gradient

基本用法

径向渐变的颜色是以圆形或椭圆形方式向外过渡，至少传入两种颜色，参数同线性渐变

.radial-gradient {
    background: radial-gradient(var(--gradient-color));
}

位置

与线性渐变相似，可以使用关键字、百分比或者绝对长度、长度和百分比值，语法参照position写法。

  1. 关键字用法：关键字用法通常使用at关键字后跟一个点的坐标来设置渐变线的中心点的位置，其中上（top）、右（right）、下（bottom）、左（left）、中（center）代表元素盒子的边缘或两个边缘之间的中心线

    radial-gradient(at top left, lightcoral, lightgreen)

  2. 长度值：使用css长度表示位置，第一个值是水平位置，第二个值是垂直位置

background: radial-gradient(at 10% 10vw, lightcoral, #fff)

  1. 组合关键字和长度值：使用关键字和长度值来指定渐变的位置，使用at 位置长度来表示对应的位置
background: radial-gradient(at bottom 30px right 100px, black, lightblue);

形状

渐变的结束形状可以通过参数改变。值可以是circle（圆形，渐变的形状是一个半径不变的正圆）或ellipse（椭圆，渐变形状是轴对称椭圆），默认椭圆

background: radial-gradient(circle, var(--gradient-color));

大小

渐变的大小由关键词（closest-side（最近的边）、farthest-side（最远的边）、closest-corner（最近的角）或farthest-corner（最远的角））或长度值（%，px，vw等）定义

  1. 关键字
    closest-side：渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。

    background: radial-gradient(closest-side, var(--gradient-color));


closest-corner：渐变结束形状与容器距离渐变中心点最近的一个角相交。

background: radial-gradient(closest-corner, var(--gradient-color));


farthest-side：类似于closest-side，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。

background: radial-gradient(farthest-side, var(--gradient-color));


farthest-corner：默认值，渐变的结束形状与容器距离渐变中心点最远的一个角相交。

background: radial-gradient(farthest-corner, var(--gradient-color));

  1. 长度值
    长度尺寸参数定义了渐变中心到渐变边缘的距离，这个距离就是渐变的半径，不足部分会使用最外层填充，相对的，超出部分使用内部颜色的填充。
background: radial-gradient(20vw, var(--gradient-color));

色标，插值，硬线和叠加

同线性渐变，下面使用径向渐变实现一个简单的调色卡

.radial-gradient-color-palette {
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 0, #f00c, transparent),
        radial-gradient(circle at 15% 70%, #0f0c, transparent),
        radial-gradient(circle at 85% 70%, #00fc, transparent);
}

conic-gradient

基本用法

conic渐变是创建一个角度渐变，通常被理解为锥形渐变。这种渐变在一个圆形的轨道上形成，与圆的中心点为中心，围绕中心点360度旋转。

background: conic-gradient(var(--gradient-color));

角度

与线性渐变角度参数一样，只不过锥形渐变需要在from关键字之后，以角度作为其值，定义顺时针方向的渐变旋转。参数参照- CSS：层叠样式表 | MDN”> - CSS：层叠样式表 | MDN对角度参数的具体用法。

  1. deg角度。一个完整的圆是360deg。例：0deg，90deg，14.23deg

    background: conic-gradient(from 45deg, var(--gradient-color), lightblue 180deg);

    上述代码表示在45度起点，在45度的基础上再转180度到终点

  2. grad百分度。一个完整的圆是400grad。例：0grad，100grad，38.8grad

    background: conic-gradient(from 50grad, var(--gradient-color), lightblue 200grad);

    效果同上

  3. rad弧度。一个完整的圆是2π弧度，约等于6.2832rad。1rad是180/π度。例：0rad，1.0708rad，6.2832rad

    background: conic-gradient(from calc(3.14rad*.25), var(--gradient-color), lightblue 3.14rad);

    效果同上（有误差）

  4. turn圈数。一个完整的圆是1turn。例：0turn，0.25turn，1.2turn

    background: conic-gradient(from .125turn, var(--gradient-color), lightblue .5turn);

    效果同上

位置

同径向渐变

background: conic-gradient(at 50% 0, var(--gradient-color));

色标，插值，硬线和叠加

由于锥形渐变没有长度的概念（除了中心点的位置需要用到长度度量），它只使用角度来表示渐变程度，所以色标，插值，硬线和叠加的基本使用单位也是上文提到的角度概念。

  • 色标

    background: conic-gradient(lightcoral 33%, lightgreen 66%);

  • *

  • 插值

    background: conic-gradient(lightcoral, 90%, lightgreen);

  • *

  • 硬线

    background: conic-gradient(black 25%, white 25% 50%, black 50% 75%, white 75%) top left / 20% 20% repeat;

  • *

  • 叠加

    border-radius: 50%;
color: #999;
background: conic-gradient(from 0deg, #0f06, transparent 120deg),
    conic-gradient(from 120deg, #00f6, transparent 120deg),
    conic-gradient(from 240deg, #f006, transparent 120deg);

repeating-***-gradient

repeating-***-gradient是创建重复的渐变，也就是将一个渐变样式重复填满整个元素。

重复渐变的使用方式与普通渐变的色标相同，只不过是使用周期重复的渐变将默认的颜色覆盖了，怎么理解这句话？

打个比方，我们使用线性渐变实现一个10%颜色的色标效果：

background: linear-gradient(white, black 10%);

上述代码中的10%只是控制了黑色什么时候开始，并没有控制结束，于是默认给渐变后面的颜色加上了黑色，重复渐变就是将这个默认的未指定的颜色修改成周期重复的渐变。可以参考背景图片的repeat属性来理解

下面我们使用这个重复渐变实现一个百叶窗，只需在上述代码中增加repeating-前缀即可

background: repeating-linear-gradient(white, black 10%);

重复的径向渐变实现一个飞镖靶子

color: #999;
border-radius: 50%;
background: repeating-radial-gradient(white, white 5%, black 5%, black 10%);

重复的锥形渐变实现一个抽奖圆盘

border-radius: 50%;
background: repeating-conic-gradient(lightcoral, lightcoral 5%, lightgreen 5%, lightgreen 10%, lightblue 10%, lightblue 15%, black 15%, black 20%);

总结

本文主要针对CSS渐变函数做了一个深入的介绍，其中渐变函数包含线性渐变linear-gradient()、径向渐变radial-gradient()、圆锥渐变conic-gradient()、重复线性渐变repeating-linear-gradient()、重复径向渐变repeating-radial-gradient()、重复圆锥渐变repeating-conic-gradient()这六类。这几种函数参数的用法也是各有千秋，通过调整角度，位置，色标等属性来实现各类渐变效果，希望文章能帮到你。

文章的最后，感谢你看到了这里，如果觉得本篇或者这个系列写的不错，还望三连支持一下，你的支持就是我创作的动力，谢谢！

相关代码

myCode: 基于js的一些小案例或者项目 - Gitee.com

参考

使用 CSS 渐变 - CSS：层叠样式表 | MDN

linear-gradient()

radial-gradient()

conic-gradient()

repeating-linear-gradient()

repeating-radial-gradient()

repeating-conic-gradient()(en-US)

CSS精读系列文章 > CSS
#前端 #面试 #开发语言 #html #css
重拾CSS，前端样式精读-函数（渐变）
http://website.diehunter1024.work/2024/07/30/重拾CSS，前端样式精读-函数（渐变）/
作者
阿宇的编程之旅
发布于
2024年7月30日
许可协议