CSS之linear-gradient( ) 函数—背景颜色渐变设计

目录

linear-gradient( ) 函数

简介:

语法:

详解:

例如:


linear-gradient( ) 函数

简介:

linear-gradient 函数是 CSS 中用于创建线性渐变的函数。它接受一个或多个参数,并使用这些参数创建一个渐变。

语法:

linear-gradient(direction, color-stop1, [color-stop2], ...)
详解:
  • direction 是一个可选的参数,指定渐变的方向。可以是 to topto rightto bottom 或 to left。默认值为 to bottom
  • color-stop 是一个可选的参数,指定渐变中每个颜色的位置和颜色值。它由两个值组成,第一个值是颜色值,第二个值是颜色的位置(可以是百分比值或关键字)
例如:

①以下代码创建了一个从上到下的线性渐变:

background-image: linear-gradient(to bottom, red, blue);

这将创建一个从红色到蓝色的渐变,渐变方向为从上到下。

②以下代码创建了一个从左到右的线性渐变,并指定了每个颜色的位置和颜色值:

background-image: linear-gradient(to right, yellow  0%, green 50%, blue 100%);

这将创建一个从黄色到绿色到蓝色的渐变,渐变方向为从左到右。第一个颜色值为黄色,位置为 0%;第二个颜色值为绿色,位置为 50%;第三个颜色值为蓝色,位置为 100%。

③linear-gradient 函数还支持多个颜色值。例如:

background-image: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet);

这将创建一个从红色到橙色到黄色到绿色到蓝色到靛蓝色到紫色的渐变,渐变方向为从上到下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/148853.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

使用关键字abstract 声明抽象类-PHP8知识详解

抽象类只能作为父类使用,因为抽象类不能被实例化。抽象类使用关键字abstract 声明,具体的使用语法格式如下: abstract class 抽象类名称{ //抽象类的成员变量列表 abstract function 成员方法1(参数); //抽象类的成员方法 abstract functi…

十天学完基础数据结构-第五天(栈(Stack)和队列(Queue))

栈的定义和特点 栈是一种线性数据结构,它遵循后进先出(LIFO)原则。栈具有以下基本概念和特点: 栈顶:栈的顶部元素,是唯一可访问的元素。 入栈:将元素添加到栈顶。 出栈:从栈顶移除…

导出视频里的字幕

导出视频里的字幕 如何利用剪映快速提取并导出视频里的字幕 https://jingyan.baidu.com/article/c35dbcb0881b6fc817fcbcd2.html 如何快速提取视频中的字幕?给大家介绍一种简单高效又免费的提取方法。需要利用到“剪映”,以下是具体的操作步骤和指引&a…

嵌入式中如何用C语言操作sqlite3(07)

sqlite3编程接口非常多,对于初学者来说,我们暂时只需要掌握常用的几个函数,其他函数自然就知道如何使用了。 数据库 本篇假设数据库为my.db,有数据表student。 nonamescore4嵌入式开发爱好者89.0 创建表格语句如下: CREATE T…

更直观地学习 Git 命令

theme: condensed-night-purple 前言 本文参考于 Learn Git Branching 这个有趣的 Git 学习网站。 在该网站,可以使用 show command 命令展示所有可用命令。 你也可以直接访问网站的sandbox,自由发挥。 本地篇 基础篇 git commit git commit将暂…

intel 一些偏门汇编指令总结

intel 汇编手册下载链接:https://www.intel.com/content/www/us/en/developer/articles/technical/intel-sdm.html LDS指令: 手册中可以找到 位于 3-588 根据手册内容猜测:lds r16 m16:16 的作用,是把位于 [m16:16] 内存地址的数…

模块化编程+LCD1602调试工具——“51单片机”

各位CSDN的uu们你们好呀,小雅兰又来啦,刚刚学完静态数码管显示和动态数码管显示,感觉真不错呢,下面,小雅兰就要开始学习模块化编程以及LCD1602调试工具的知识了,让我们进入51单片机的世界吧!&am…

【数据结构】布隆过滤器

布隆过滤器的提出 在注册账号设置昵称的时候,为了保证每个用户昵称的唯一性,系统必须检测你输入的昵称是否被使用过,这本质就是一个key的模型,我们只需要判断这个昵称被用过,还是没被用过。 方法一:用红黑…

2024级199管理类联考之数学基础(下篇)

平面几何(平均2题) 三角形(性质、特殊三角形、全等与相似) 性质 由不在同一直线的三条线段首尾依次连接所组成的图形三条边、三个内角、三个定点三角形内角和为180度,外角和为360度,多边形的外角和为360度,n多边形的内角和为(n-2)*180度一个外角等于不相邻的两个内角之和任意…

WSL安装异常:WslRegisterDistribution failed with error: 0xc03a001a

简介:如果文件夹右上角是否都有两个相对的蓝色箭头,在进行安装wsl时,设置就会抛出 Installing WslRegisterDistribution failed with error: 0xc03a001a的异常 历史攻略: 卸载WSL WSL:运行Linux文件 WSL&#xff1…

全志ARM926 Melis2.0系统的开发指引②

全志ARM926 Melis2.0系统的开发指引② 编写目的4. 编译工具链使用4.1.工具链通用配置4.2.模块的工具链配置4.3.简单的 makefile 5. 固件烧录工具的安装5.1.PhoenixSuit 的安装步骤5.2.检验 USB 驱动安装5.3.使用烧录软件 PhoenixSuit -全志相关工具和资源-.1 全志固件镜像修改工…

【Vue组件化编程】

Vue组件化编程 1 对组件的理解2 非单文件组件2.1 基本使用2.2 几个注意点2.3 组件的嵌套2.4 VueComponent构造函数2.5 一个重要的内置关系 3 单文件组件 1 对组件的理解 组件:实现应用中局部功能代码和资源的集合。优点:文件好维护;依赖关系不…

Scala第十六章节

Scala第十六章节 scala总目录 文档资料下载 章节目标 掌握泛型方法, 类, 特质的用法了解泛型上下界相关内容了解协变, 逆变, 非变的用法掌握列表去重排序案例 1. 泛型 泛型的意思是泛指某种具体的数据类型, 在Scala中, 泛型用[数据类型]表示. 在实际开发中, 泛型一般是结合…

vue重修004上部

文章目录 版权声明组件的三大组成部分scoped解决样式冲突scoped原理2.代码演示 组件data函数说明演示 组件通信组件关系分类通信解决方案父子通信流程子向父通信代 props详解props校验props&data、单向数据流 小黑记事本(组件版)基础组件结构需求和实…

【APUE】文件系统 — 类 du 命令功能实现

一、du命令解析 Summarize disk usage of the set of FILEs, recursively for directories. du 命令用于输出文件所占用的磁盘空间 默认情况下,它会输出当前目录下(包括该目录的所有子目录下)的所有文件的大小总和,以 1024B 为单…

基于SSM的餐厅点菜管理系统的设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用Vue技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

NXP公司K60N512+PWM控制BLDC电机

本篇文章介绍了使用NXP公司提供的塔式快速原型系统来驱动控制带霍尔传感器的无刷直流电机。文章涉及的塔式快速原型系统主要包括以下四个独立板卡:1.塔式系统支撑模块(TWR-Elevator),用以连接微控制器以及周边模块;2.低…

ChatGPT必应联网功能正式上线

今日凌晨发现,ChatGPT又支持必应联网了!虽然有人使用过newbing这个阉割版的联网GPT4,但官方版本确实更加便捷好用啊! 尽管 ChatGPT 此前已经展现出了其他人工智能模型无可比拟的智能,但由于其训练数据的限制&#xff…

CUDA+cuDNN+TensorRT 配置避坑指南

深度学习模型加速部署的环境配置,需要在本地安装NVIDIA的一些工具链和软件包,这是一个些许繁琐的过程,而且一步错,步步错。笔者将会根据自己的经验来提供建议,减少踩坑几率。当然可以完全按照官方教程操作,…

xilinx的原语的使用

xilinx的原语的使用 在学习FPGA实现千兆网时需要GMII转RGMII,这就涉及了原语的使用,特此记录! 一、原语 与RGMII接口相关的原语: BUFG:全局时钟网络 BUFIO:只能采集IO的数据,采集IO数据的时候延时是最低的…