前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

站长

2023年10月05日 20:36 · 阅读数 85

前言

在日常的开发中，线性渐变应该是我们使用次数最多的了，通常都是背景颜色的渐变；
除了 线性渐变 还有 径向渐变、锥形渐变；
在开发中合理使用渐变，可以完成一些特殊的效果；
注意：
- 因为是颜色渐变，所以最少要有两个颜色，多了不限；

一、线性渐变

往哪个方向渐变；从哪个颜色渐变到哪个颜色；

1.1、渐变方向

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

1.2、渐变属性

background-image: linear-gradient(方向, 色值1 色值区间, 色值2 色值区间, ...色值n 色值区间);
/* 方向：可以是角度，也可以是 (to 方位名词)[to right / 90deg、to top / 0deg、to left / -90deg、to bottom / 180deg] */

1.3、设置 - 渐变方向

to 方位名词：

to right / 90deg - 从左向右
to left / -90deg - 从右向左
to top / 0deg - 从下向上
to bottom / 180deg - 从上到下

对角线方向：

to right top - 从左下向右上
to right bottom - 从左上到右下
to left top- 从右下到左上
to left bottom - 从右上向左下

角度：
- 度数；
- 当我们写角度的时候，可以在浏览器的Styles面板中看到这样的按钮（第一个红框）：
  - 我们可以点击第一个红框，点击之后会出现下面的表盘，我们可以将鼠标放在大头上拖着选合适的角度；
注意：
- 渐变方向可以省略不写，默认的渐变方向：从上到下；
大家可以根据的习惯，选择角度或方位名词；

1.4、设置 - 渐变区间

每个颜色值后面写像素值：
- 表示：当前这个颜色，从当前这个像素位置开始，渐变到下一个像素区间；

1.5、设置 - 重复渐变

开发中应该是极少遇到这种情况的；
渐变的函数为：linear-gradient()；
重复渐变的函数为：repeating-linear-gradient()；
重复渐变发生在没有渐变区域的地方；

代码展示：

/* 0 - 50px 纯绿色：没有渐变 - 会发生重复渐变 */
/* 绿色 渐变为 黄色： 从50px开始，到100px结束 */
/* 黄色 渐变为 红色： 从100px开始，到150px结束 */
/* 150px - 300px 纯红色：没有渐变 - 会发生重复渐变 */
background-image: repeating-linear-gradient(#1E9600 50px, #FFF200 100px, #FF0000 150px);

就目前这个例子来说，50px ~ 150px是有渐变区域的；而0 ~ 50px；150px ~ 300px这两个区间是没有渐变的（重复渐变就发生在这两个区间）；0 ~ 50px是找下个渐变流程的最后一个渐变区间（黄➡红），150px ~ 300px是找上个渐变流程的第一个渐变区间（绿➡黄）；

1.6、示例

示例展示：

<style>
    .outer {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 300px;
        border: 1px solid #333;
    }

    .inner {
        width: 300px;
        height: 200px;
        border: 1px solid #333;
        font-size: 20px;
        text-align: center;
        line-height: 30px;
    }

    .inner1 {
        background-image: linear-gradient(#1E9600, #FFF200, #FF0000);
    }

    .inner2 {
        background-image: linear-gradient(to right top, #1E9600, #FFF200, #FF0000);
    }

    .inner3 {
        background-image: linear-gradient(120deg, #1E9600, #FFF200, #FF0000);
    }

    .inner4 {
        /* 绿色 渐变为 黄色：从0开始，到150px结束 */
        /* 黄色 渐变为 红色： 从150px开始，300px结束（盒子宽度为300px） */
        background-image: linear-gradient(120deg, #1E9600 0px, #FFF200 150px, #FF0000 300px);

        /* 0 - 50px 纯绿色 */
        /* 绿色 渐变为 黄色： 从50px开始，到100px结束 */
        /* 黄色 渐变为 红色： 从100px开始，到150px结束 */
        /* 150px - 300px 纯红色 */
        background-image: linear-gradient(120deg, #1E9600 50px, #FFF200 100px, #FF0000 150px);
    }

    .inner5 {
        background-image: repeating-linear-gradient(#1E9600 50px, #FFF200 100px, #FF0000 150px);
    }
</style>

<body>
    <div class="outer">
        <div class="inner inner1">默认渐变方向 - 从上到下</div>
        <div class="inner inner2">to right top - 从左下到右上</div>
        <div class="inner inner3">角度：30deg</div>
        <div class="inner inner4">渐变区间</div>
        <div class="inner inner5">渐变重复</div>
    </div>
</body>

效果展示：

二、径向渐变

径向渐变：
- 就是从圆心开始渐变，向四周扩散；
  - 所以不能为 径向渐变 设置 渐变方向，但是可以设置 圆心位置；
- 此处的圆不一定是正圆，会根据给定盒子的宽高来确定是圆还是椭圆；

2.1、渐变方向

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

2.2、渐变属性

background-image: radial-gradient(渐变形状 圆心位置, 色值1 色值区间, 色值2 色值区间, ...色值n 色值区间);

2.3、设置 - 圆心位置

关键字：at；

默认位置：

容器的中心：

background-image: radial-gradient(#1E9600, #FFF200, #FF0000);

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

方位名词：

/* 将圆心放在左上角位置 */
background-image: radial-gradient(at left top, #1E9600, #FFF200, #FF0000);

坐标：

/* at x坐标 y坐标 */
background-image: radial-gradient(at 80px 160px, #1E9600, #FFF200, #FF0000);

2.4、设置 - 渐变形状

默认：
- 根据容器的宽高所定；
- 想要改变，需要添加关键字；
关键字：
- 总共有两个关键字；
- circle（正圆）；
- ellipse（椭圆）；

除了关键字也可以写横坐标和纵坐标的半径：

正圆： 50px 50px
椭圆： 150px 50px

示例展示：

/* 下面两种写法一致，区别在于一个是使用的 圆的半 径一个是使用的 关键词 */
/* 先设置渐变形状，再设置圆心位置 */
background-image: radial-gradient(140px 140px at 150px 100px, #1E9600, #FFF200, #FF0000);
background-image: radial-gradient(circle at 150px 100px, #1E9600, #FFF200, #FF0000);

注意
- 当写半径的时候，我们就能控制渐变区域的大小；

2.5、设置 - 渐变区间

/* 圆心在容器的正中间的正圆 */
/* 0 - 50px 纯绿色的圆 */
/* 50px - 100px 绿色 渐变为 黄色 */
/* 100px - 150px 黄色 渐变为 红色 */
/* 150px - 300px 纯红色的圆 */
background-image: radial-gradient(circle, #1E9600 50px, #FFF200 100px, #FF0000 150px);

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

2.6、设置 - 重复渐变

重复渐变只发生在纯色（没有渐变）的区域；

/* 圆心在容器的正中间的正圆 */
/* 0 - 50px 找 下一个 渐变流程的 最后一个 渐变区间 */
/* 150px - 300px 找 上一个 渐变流程的 第一个 渐变区间 */
background-image: repeating-radial-gradient(circle, #1E9600 50px, #FFF200 100px, #FF0000 150px);

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

2.7、本节示例

示例展示：

  <style>
    .outer {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
      width: 100%;
      border: 1px solid #333;
    }

    .inner {
      flex-shrink: 0;
      width: 300px;
      height: 200px;
      margin-bottom: 20px;
      border: 1px solid #333;
      font-size: 20px;
      text-align: center;
      line-height: 30px;
    }

    .inner1 {
      background-image: radial-gradient(#1E9600, #FFF200, #FF0000);
    }

    .inner2 {
      background-image: radial-gradient(at left top, #1E9600, #FFF200, #FF0000);
    }

    .inner3 {
      background-image: radial-gradient(at 80px 160px, #1E9600, #FFF200, #FF0000);
    }

    .inner4 {
      background-image: radial-gradient(circle at 150px 100px, #1E9600, #FFF200, #FF0000);
    }

    .inner5 {
      background-image: radial-gradient(circle, #1E9600, #FFF200, #FF0000);
    }

    .inner6 {
      /* 0 - 50px 纯绿色的圆 */
      /* 50px - 100px 绿色 渐变为 黄色 */
      /* 100px - 150px 黄色 渐变为 红色 */
      /* 150px - 300px 纯红色的圆 */
      background-image: radial-gradient(circle, #1E9600 50px, #FFF200 100px, #FF0000 150px);
    }

    .inner7 {
      /* 0 - 50px 找 下一个 渐变流程的 最后一个 渐变区间 */
      /* 150px - 300px 找 上一个 渐变流程的 第一个 渐变区间 */
      background-image: repeating-radial-gradient(circle, #1E9600 50px, #FFF200 100px, #FF0000 150px);
    }

    .inner8 {
      background-image: radial-gradient(140px 140px at 150px 100px, #1E9600, #FFF200, #FF0000);
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner inner1">默认渐变，从圆心开始渐变</div>
    <div class="inner inner2">改变圆心位置 - at left top - 左上角</div>
    <div class="inner inner3">坐标 - 像素点</div>
    <div class="inner inner4">调整渐变形态 及 圆心</div>
    <div class="inner inner5">只调整渐变形状，圆心自动计算</div>
    <div class="inner inner6">渐变区间</div>
    <div class="inner inner7">重复渐变</div>
    <div class="inner inner8">设置：渐变形状 + 圆心位置 + 渐变区间</div>
  </div>
</body>

效果展示：

三、锥形渐变

3.1、渐变方向

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

3.2、渐变属性

background-image: conic-gradient(从哪个角度开始渐变 轴心, 色值1 色值区间, 色值2 色值区间, ..., 色值n 色值区间);

3.3、设置 - 开始渐变的角度

关键词：
- from 角度；
- 默认角度为 0 deg。垂直向上；
- 注意：
  - 这里 只能写角度；
- 改变角度之后，该元素的坐标系也会发生变化，相当于将该元素的坐标系旋转了一定的角度；

示例展示：

.inner1 {
  background-image: conic-gradient(#1E9600, #FFF200, #FF0000);
}

.inner2 {
  background-image: conic-gradient(from 90deg, #1E9600, #FFF200, #FF0000);
}

3.4、设置 - 圆心（圆锥的顶点\轴心）位置

关键词：
- at 坐标；

示例展示：

/* 在整个盒子中找 横坐标为100px，纵坐标为100px的点，将这个点作为圆心或圆锥的顶点或轴心，默认是垂直向上的 */
background-image: conic-gradient(at 100px 100px, #1E9600, #FFF200, #FF0000);

3.5、设置 - 渐变区间

注意：
- 渐变区间 只能写角度；

/* 0 ~ 120deg 不发生渐变，纯绿色 */
/* 120deg ~ 240deg 绿色 渐变为 黄色*/
/* 240deg ~ 360deg 黄色 渐变为 红色 */ 
background-image: conic-gradient(#1E9600 120deg, #FFF200 240deg, #FF0000 360deg);

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

3.6、设置 - 重复渐变

注意：
- 重复渐变只发生在 没有渐变的区域（纯色的区域）；

/* 0 ~ 120deg 为纯绿色，会发生重复渐变 */
/* 绿色从 120deg 开始，上一次渐变的结束色为红色，红色与黄色的渐变区间为 120deg，绿色的纯色区域刚好为120deg，所以最终呈现的颜色为 黄色 -> 红色*/
background-image: repeating-conic-gradient(#1E9600 120deg, #FFF200 240deg, #FF0000 360deg);

/* 0 ~ 90deg、270deg ~ 360deg 为纯色区域，会发生重复渐变*/
/* 0 ~ 90deg 绿色从90deg开始，上一次渐变的结束色为红色，红色与黄色的渐变区间为 90deg，绿色的纯色区域也为90deg，所以呈现的渐变颜色为 黄色 -> 红色*/
/* 270deg ~ 360deg 红色从270deg结束，下一次渐变的开始颜色为绿色，绿色与黄色的渐变区间为 90deg，红色的纯色区域也为90deg，所以呈现的颜色为 绿色 -> 黄色 */
background-image: repeating-conic-gradient(#1E9600 90deg, #FFF200 180deg, #FF0000 270deg);

/* 0 ~ 160deg 为纯绿色，会发生重复渐变 */
/* 绿色从 160deg 开始，上一次渐变的结束色为红色，红色与黄色的渐变区间为 120deg，绿色的纯色区域为160deg，所以在 40deg ~ 160deg 区间 最终呈现的颜色为 黄色 -> 红色*/
/* 黄色的上一个颜色是绿色，而绿色到黄色的渐变区间为80deg，目前只有40deg，所以，这块区域最终呈现的渐变色为完成渐变区间的 40deg ~ 80deg之间的色值（简单来说，就是将完成渐变区间的80deg看作是此时的40deg，将完成渐变区间的40deg，看作是此时的0deg） */
background-image: repeating-conic-gradient(#1E9600 160deg, #FFF200 240deg, #FF0000 360deg);

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

3.7、本节示例

  <style>
    .outer {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      flex-wrap: wrap;
      border: 1px solid #333;
    }

    .inner {
      flex-shrink: 0;
      width: 300px;
      height: 300px;
      margin: 40px 0;
      border: 1px solid #333;
      font-size: 20px;
      text-align: center;
      line-height: 300px;
      border-radius: 50%;
    }

    .inner1 {
      background-image: conic-gradient(#1E9600, #FFF200, #FF0000);
    }

    .inner2 {
      background-image: conic-gradient(from 90deg, #1E9600, #FFF200, #FF0000);
    }

    .inner3 {
      background-image: conic-gradient(at 100px 100px, #1E9600, #FFF200, #FF0000);
    }

    .inner4 {
      background-image: conic-gradient(from 90deg at 100px 100px, #1E9600, #FFF200, #FF0000);
    }

    .inner5 {
      background-image: conic-gradient(#1E9600 120deg, #FFF200 240deg, #FF0000 360deg);
    }

    .inner6 {
      background-image: repeating-conic-gradient(#1E9600 120deg, #FFF200 240deg, #FF0000 360deg);
      /* background-image: repeating-conic-gradient(#1E9600 90deg, #FFF200 180deg, #FF0000 270deg); */
      background-image: repeating-conic-gradient(#1E9600 160deg, #FFF200 240deg, #FF0000 360deg);
    }

    .inner7 {
      background-image: conic-gradient( from 90deg at 120px 120px, #1E9600 120deg, #FFF200 240deg, #FF0000 360deg);
      background-image: repeating-conic-gradient( from 90deg at 120px 120px, #1E9600 120deg, #FFF200 240deg, #FF0000 360deg);
    }

    .inner8 {
      background-image: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner inner1">基本属性</div>
    <div class="inner inner2">改变开始角度</div>
    <div class="inner inner3">改变轴心位置</div>
    <div class="inner inner4">设置：开始角度 + 轴心位置</div>
    <div class="inner inner5">设置 - 渐变区间</div>
    <div class="inner inner6">设置 - 重复渐变</div>
    <div class="inner inner7">综合写法</div>
    <div class="inner inner8">色相环图</div>
  </div>
</body>

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

四、案例 - 渐变文字

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .text {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 96vw;
      height: 30vh;
      margin: 10px auto;
      border: thick double #32a1ce;
      color: transparent; /* 字体颜色为透明色 */
      letter-spacing: 20px; /* 设置文字之间的间距 */
      font-size: 100px;
      font-weight: 700;
      background-clip: text;  /* 将文字意外的区域都裁剪掉，单纯写该属性，可能某些浏览器不能兼容，为了兼容，需要在该属性前面加上 -浏览器内核 */
      -webkit-background-clip: text;  /* 谷歌浏览器 */
      -moz-background-clip: text;  /* 火狐浏览器 */
      -ms-background-clip: text;  /* IE浏览器 */
      -o-background-clip: text;  /* Opera浏览器 */
    }

    .linear {
      background-image: linear-gradient(to right, #77A1D3, #79CBCA, #E684AE); /* 线性渐变 */
    }

    .radial {
      background-image: radial-gradient(circle, #77A1D3, #79CBCA, #E684AE); /* 径向渐变 */
    }

    .conic {
      background-image: conic-gradient(#77A1D3, #79CBCA, #E684AE, #77A1D3); /* 锥形渐变 */
    }
  </style>
</head>

<body>
  <div class="text linear">禁止摆烂-才浅[线性渐变]</div>
  <div class="text radial">禁止摆烂-才浅[径向渐变]</div>
  <div class="text conic">禁止摆烂-才浅[锥形渐变]</div>
</body>

</html>

前端开发小技巧 - 【CSS】 - 渐变属性【线性渐变 + 径向渐变 + 锥形渐变】

转载自:https://juejin.cn/post/7285373518838104119