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

禁止摆烂_才浅2023-10-05 16:52

前言

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

一、线性渐变

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

1.1、渐变方向

1.2、渐变属性

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

1.3、设置 - 渐变方向

  • to 方位名词：

    css 复制代码 
    to right / 90deg - 从左向右
to left / -90deg - 从右向左
to top / 0deg - 从下向上
to bottom / 180deg - 从上到下

  • 对角线方向：

    css 复制代码 
    to right top - 从左下向右上
to right bottom - 从左上到右下
to left top- 从右下到左上
to left bottom - 从右上向左下

  • 角度：

    • 度数；
    • 当我们写角度的时候，可以在浏览器的Styles面板中看到这样的按钮（第一个红框）：
      • 我们可以点击第一个红框，点击之后会出现下面的表盘，我们可以将鼠标放在大头上拖着选合适的角度；

  • 注意 ：

    • 渐变方向可以省略不写，默认的渐变方向：从 上 到 下；

  • 大家可以根据的习惯，选择角度或方位名词；

1.4、设置 - 渐变区间

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

1.5、设置 - 重复渐变

  • 开发中应该是极少遇到这种情况的；

  • 渐变的函数为：linear-gradient()；

  • 重复渐变的函数为：repeating-linear-gradient()；

  • 重复渐变 发生在 没有 渐变区域 的 地方；

  • 代码展示：

    css 复制代码 
    /* 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、示例

  • 示例展示：

    html 复制代码 
    <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、渐变方向

2.2、渐变属性

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

2.3、设置 - 圆心位置

  • 关键字 ：at；

  • 默认位置 ：

    • 容器的中心：
    css 复制代码 
    background-image: radial-gradient(#1E9600, #FFF200, #FF0000);

  • 方位名词 ：

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

  • 坐标 ：

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

2.4、设置 - 渐变形状

  • 默认：

    • 根据容器的宽高所定；
    • 想要改变，需要添加关键字；

  • 关键字 ：

    • 总共有两个关键字；
    • circle（正圆）；
    • ellipse（椭圆）；

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

    css 复制代码 
    正圆： 50px 50px
椭圆： 150px 50px

    • 示例展示：

      css 复制代码 
      /* 下面两种写法一致，区别在于一个是使用的 圆的半 径一个是使用的 关键词 */
/* 先设置渐变形状，再设置圆心位置 */
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、设置 - 渐变区间

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

2.6、设置 - 重复渐变

  • 重复渐变只发生在纯色（没有渐变）的区域；
css 复制代码 
/* 圆心在容器的正中间的正圆 */
/* 0 - 50px 找 下一个 渐变流程的 最后一个 渐变区间 */
/* 150px - 300px 找 上一个 渐变流程的 第一个 渐变区间 */
background-image: repeating-radial-gradient(circle, #1E9600 50px, #FFF200 100px, #FF0000 150px);

2.7、本节示例

  • 示例展示：

    html 复制代码 
      <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、渐变方向

3.2、渐变属性

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

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

  • 关键词：

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

  • 示例展示：

    css 复制代码 
    .inner1 {
  background-image: conic-gradient(#1E9600, #FFF200, #FF0000);
}

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

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

  • 关键词：

    • at 坐标；

  • 示例展示：

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

3.5、设置 - 渐变区间

  • 注意 ：
    • 渐变区间 只能 写 角度；
css 复制代码 
/* 0 ~ 120deg 不发生渐变，纯绿色 */
/* 120deg ~ 240deg 绿色 渐变为 黄色*/
/* 240deg ~ 360deg 黄色 渐变为 红色 */ 
background-image: conic-gradient(#1E9600 120deg, #FFF200 240deg, #FF0000 360deg);

3.6、设置 - 重复渐变

  • 注意 ：
    • 重复渐变只发生在 没有渐变的区域 （纯色的区域）；
css 复制代码 
/* 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);

3.7、本节示例

html 复制代码 
  <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>

四、案例 - 渐变文字

html 复制代码 
<!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>
相关推荐
golitter.3 分钟前
Ajax和axios简单用法
前端·ajax·okhttp
雷特IT23 分钟前
Uncaught TypeError: 0 is not a function的解决方法
前端·javascript
长路 ㅤ   1 小时前
vite学习教程02、vite+vue2配置环境变量
前端·vite·环境变量·跨环境配置
亚里士多没有德7751 小时前
强制删除了windows自带的edge浏览器，重装不了怎么办【已解决】
前端·edge
micro2010141 小时前
Microsoft Edge 离线安装包制作或获取方法和下载地址分享
前端·edge
.生产的驴1 小时前
Electron Vue框架环境搭建 Vue3环境搭建
java·前端·vue.js·spring boot·后端·electron·ecmascript
awonw1 小时前
[前端][easyui]easyui select 默认值
前端·javascript·easyui
老齐谈电商1 小时前
Electron桌面应用打包现有的vue项目
javascript·vue.js·electron
LIURUOYU4213081 小时前
vue.js组建开发
vue.js
九圣残炎1 小时前
【Vue】vue-admin-template项目搭建
前端·vue.js·arcgis
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【极空间NAS】使用WebDAV服务 + DDNSTO内网穿透 实现思源笔记的内外网同步08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10pve(Proxmox VE)安装i225v网卡驱动