前端css中线性渐变（linear-gradient）的使用

2024-05-10 08:12
文章标签 使用 css 前端 frontend 线性 linear gradient 渐变

本文主要是介绍前端css中线性渐变（linear-gradient）的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端css中线性渐变

  • 一、前言
  • 二、关键词句
  • 三、主要内容说明
    • （一）、线性渐变方向
      • 1.角度调整方向
      • 2.负值角度，源码1
      • 3.源码1运行效果
      • 4.关键字调整方向
      • 5.to right向右线性渐变，源码2
      • 6.源码2运行效果
    • （二）、线性渐变颜色断点
      • 1.颜色断点距离，源码3
      • 2.源码3运行效果
  • 四、结语
  • 五、定位日期

一、前言

linear-gradient线性渐变是一种两个以上颜色之间的平滑过渡效果。线性渐变为某一方向指向的渐变效果，如由左到右，上到下，左上到右下等。和径向渐变不同的是，径向渐变是一中心点向周围扩散的渐变，径向渐变为某一线性指向方向的渐变。
线性渐变和径向渐变一样属于背景图片background-image一类，不属于颜色一类，只是通过对颜色进行渐变设置的一种背景图片。用法和径向渐变类似，用于可设置背景属性的元素组件。

二、关键词句

background: linear-gradient(A方向, B1颜色断点1, B2颜色断点2, ...);
以下效果相同
background-image: linear-gradient(A方向, B1颜色断点1, B2颜色断点2, ...);

  • A ------ 设置线性渐变的方向，可以设置角度，如“90deg”，也可以使用关键字，如“to right”。如当设置两颜色断点，前为红，后为绿，那么“to right”向右，表示左为红，右为绿，中间则为渐变的区域。如下图：
    在这里插入图片描述
    颜色走向具体属性有：
    –to top 下 -往-> 上
    –to tottom 上 -往-> 下
    –to left 右 -往-> 左
    –to right 左 -往-> 右
    –0deg 上 -往-> 下
    –90deg 右 -往-> 左
    –180deg 下 -往-> 上
    –270deg 左 -往-> 右

  • B ------ 设置颜色的断点，颜色后可以设置百分比或绝对位置，如“red 50%”，“green 20px”

三、主要内容说明

（一）、线性渐变方向

1.角度调整方向

–0deg 下 -往-> 上
–90deg 左 -往-> 右
–180deg 上 -往-> 下
–270deg 右 -往-> 左
角度选360deg时返回原点，也相当于0deg的效果。现在选择两种颜色进行线性渐变效果演示。

  • 当0deg时，即
    background-image: linear-gradient(0deg, red, green);
    效果为：
    在这里插入图片描述
    设置的颜色为前红，后绿，0度的走向为由下往上，相当于中间有一个渐变的水平分隔线。当增大角度，则分隔线进行顺时针进行旋转，变更为所设定角度的分隔线。

  • 如45deg时，水平线顺时针45度旋转，渐变分隔线变为45deg的分隔线。如
    background-image: linear-gradient(45deg, red, green);时，效果如下：
    在这里插入图片描述

  • 当到90deg时，则转化为由左往右的渐变效果，如
    background-image: linear-gradient(90deg, red, green);时，效果如下：
    在这里插入图片描述
    由上，角度180deg，270deg效果以此类推即可。当角度选负值时则按逆时针旋转类推。

2.负值角度，源码1

使用负角度举例，-45deg情况下，红色和绿色断点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本线性渐变背景</title><style>/* 确保html和body元素填充整个视口高度 */html, body {height: 100%;margin: 0; /* 去掉默认的body边距 */}/* 使box-max元素在页面中水平和垂直居中 */body {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.box-max {margin: 50px 50px; /* 添加外边距 */width: 300px; /* 设置宽度 */height: 200px; /* 设置高度 */background-image: linear-gradient(-45deg, red, green); /* 设置线性渐变背景，从红色到绿色，角度为-45度 */}</style>
</head>
<body><div class="box-max"></div>
</body>
</html>

3.源码1运行效果

  • 截图效果如下：
    在这里插入图片描述

4.关键字调整方向

–to top 下 -往-> 上
–to tottom 上 -往-> 下
–to left 右 -往-> 左
–to right 左 -往-> 右
关键字以关键字方向为终点来理解，如“to top”，为往上，那么起点为下，则渐变走向为由下而上。其他向下、向左、向右以此类推。

  • 当使用“to top”，颜色走向由下而上，即
    background-image: linear-gradient(to top, red, green);
    效果如下：
    在这里插入图片描述
  • 当使用“to bottom”，颜色走向由上而下，即
    background-image: linear-gradient(to bottom, red, green);
    效果如下：
    在这里插入图片描述
  • 当使用“to left”，颜色走向由右而左，即
    background-image: linear-gradient(to left, red, green);
    效果如下：
    在这里插入图片描述

5.to right向右线性渐变，源码2

关键字“to right”的效果。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本线性渐变背景</title><style>/* 确保html和body元素填充整个视口高度 */html, body {height: 100%; /* 设置html和body高度为100% */margin: 0; /* 去掉默认的body边距 */}/* 使box-max元素在页面中水平和垂直居中 */body {display: flex; /* 使用flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.box-max {margin: 50px; /* 添加外边距，四边各50px */width: 300px; /* 设置宽度为300px */height: 200px; /* 设置高度为200px */background-image: linear-gradient(to right, red, green); /* 设置线性渐变背景，从红色到绿色，方向为从左到右 */}</style>
</head>
<body><div class="box-max"></div>
</body>
</html>

6.源码2运行效果

在这里插入图片描述

（二）、线性渐变颜色断点

颜色设置两个以上才有效果，可以用颜色名称，16进制，rgb等颜色格式。颜色后可设置百分比或具体距离，来确定颜色的具体可见位置边界。举例当两种颜色渐变的情况下，红色，绿色，中间还有一个渐变区域，具体设置颜色的位置距离主要是修改红色或绿色，与渐变区域的交界位置距离。

1.颜色断点距离，源码3

源码2的基础上，修改颜色断点数值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本线性渐变背景</title><style>/* 确保html和body元素填充整个视口高度 */html, body {height: 100%; /* 设置html和body高度为100% */margin: 0; /* 去掉默认的body边距 */}/* 使box-max元素在页面中水平和垂直居中 */body {display: flex; /* 使用flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */}.box-max {margin: 50px; /* 添加外边距，四边各50px */width: 300px; /* 设置宽度为300px */height: 200px; /* 设置高度为200px */background-image: linear-gradient(to right, red 50px, green 50%); /* 设置线性渐变背景，从红色到绿色，方向为从左到右 */}</style>
</head>
<body><div class="box-max"></div>
</body>
</html>

2.源码3运行效果

  • 当 red 50px, green 50%的效果，即源码3的效果如下：
    在这里插入图片描述
  • 当不设置颜色边距的效果，即 red 0px, green 0%，以对比，效果如下：
    在这里插入图片描述

四、结语

颜色断点也可以设置三种，或更多种，本文只演示了两种的情况。线性是某一方向的渐变，和径向渐变的由中心向四周扩散的效果不同。但两渐变的用法十分相似。
由于笔者的能力有限，创作的内容有所不足在所难免，也敬请读者包涵和指出，万分感谢！

五、定位日期

2024.5.9;
20:51

这篇关于前端css中线性渐变（linear-gradient）的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/975920。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2