5分钟速成渐变色css

色彩的分支——渐变色定义:按照一定规律做阶段性变化的色彩(抽象!!!)

我们可以将图片分为两块

以中心线为参考,再来看渐变色的定义:按照一定规律做阶段性变化的色彩

既然是按一定的规律做阶段性变化,那么这个规律是我们的核心吗?

当然不是,毕竟这个太太太底层了,涉及到了源码,如有兴趣点赞过20爆肝!

抛开原有的定义,来一个简单到无敌的全新理解:

x(r + g + b)= y       翻译成中文         规律(颜色1 + 颜色2 + 颜色3)= 渐变色

通过这个公式,我们很容易就知道,渐变色的核心在于x元素

(计算机可看不懂颜色,转换,三原色)

是时候揭露 x元素了,他就是CSS3中background的linear-gradient()函数

小试牛刀:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>#grad1{width: 500px;height: 500px;background: linear-gradient(red,green,blue);//核心}
</style>
</head><body>
<div id="grad1"></div>//载体
</body>
</html>

建议使用线上体验

啊!怎么是上下结构

莫慌,屌爆了的前辈们提供了一种自定义方向的属性

x [ to + z (r + g + b) ]= y  翻译一下 规律【方向(颜色1,颜色2,颜色3)】 = 渐变色

to + z 默认值为由上到下

方向:上到下为默认,我要和开始提供的图片一样,左到右 to left,右到左 to right

ps:上下,左右可以通过调职颜色1和颜色3的位置到达一样的效果

x [ to + z (r + g + b) ]= y

规律【方向(颜色1,颜色2,颜色3)】 = 渐变色

渐变色实际上就是一张独特的背景颜色

第一步:设置一个background:

第二步:添加函数linear-gradient(red,green,blue);

第三步:自定义根据公式按自己的需求进行修改

规律【方向(颜色1,颜色2,颜色3)】 = 渐变色

background: linear-gradient(to + z , r , g , b);

提问:颜色可以多少个?

答案目前所测试15以下是可行的,15以上不知道

ps:颜色可以用rgb格式等方法实现

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

京津冀光伏展

京津冀光伏展是中国在京津冀地区举办的一项光伏产业展览活动。该展览旨在展示京津冀地区光伏产业的最新发展成果&#xff0c;促进光伏行业的交流与合作&#xff0c;推动光伏产业的可持续发展。 光伏产业是指利用太阳能将光能转化为电能的产业。作为一种清洁能源&#xff0c;光伏…

Databend 开源周报第 134 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持多语句事务…

1907_Arm Cortex-M3的基本了解

1907_Arm Cortex-M3的基本了解 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) 我发现Arm Coretex-M3有一个专门的DataSheet&#xff0c;看起来这个的确是被当做了一个设计的产品来对待的。正好&#xff0c;基于这个文件来看看M3具备哪些基本的特性&…

灯塔:HTML笔记

网页由哪些部分组成&#xff1f; *文字 图片 音频 视频 超链接 程序员写的代码是通过浏览器转换成网页的 五大浏览器有哪些&#xff1f; *IE浏览器 *火狐浏览器&#xff08;Firefox&#xff09; *谷歌浏览器&#xff08;Chrome&#xff09; *Safari浏览器 *欧朋浏览器&…

【机器学习】生成对抗网络GAN

概述 生成对抗网络&#xff08;Generative Adversarial Network&#xff0c;GAN&#xff09;是一种深度学习模型架构&#xff0c;由生成器&#xff08;Generator&#xff09;和判别器&#xff08;Discriminator&#xff09;两部分组成&#xff0c;旨在通过对抗训练的方式生成逼…

【Linux】Shell命令运行原理和权限详解

【Linux】Shell命令运行原理和权限详解 一、剩余指令的补充1.tar指令2.bc指令3.uname4.热键 二、Shell命令运行原理1.Shell2.为什么Linux不让用户直接使用kernel 三、Linux权限概念四、Linux权限管理1.文件访问的用户分类2.文件类型和访问权限&#xff08;1&#xff09;文件类型…

GitHub登不上:修改hosts文件来解决(GitHub520,window)

参考链接&#xff1a;GitHub520: 本项目无需安装任何程序&#xff0c;通过修改本地 hosts 文件&#xff0c;试图解决&#xff1a; GitHub 访问速度慢的问题 GitHub 项目中的图片显示不出的问题 花 5 分钟时间&#xff0c;让你"爱"上 GitHub。 (gitee.com) GitHub网站…

Prometheus结合Grafana监控MySQL,这篇不可不读!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

IOS 发布遇到“Unable to authenticate with App Store Connect”错误咋解决?

问题&#xff1a; 在开发ios app后&#xff0c;先发布adhoc版本&#xff0c;测试通过后&#xff0c;再发布testflight版本测试&#xff0c;但是可能会遇到一下问题。 解决办法&#xff1a; 在Signing &Capabilities中&#xff0c;在ios下边要指定有发布权限的Team账号&a…

数据库之间数据迁移工具datax

简介 DataX 是阿里云 DataWorks数据集成 的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, databe…

链路负载均衡之DNS透明代理

一、DNS透明代理 一般来说&#xff0c;企业的客户端上都只能配置一个运营商的DNS服务器地址&#xff0c;DNS服务器通常会将域名解析成自己所在ISP内的Web服务器地址&#xff0c;这将导致内网用户的上网流量都集中在一个ISP的链路上转发&#xff0c;最终可能会造成链路拥塞&…

常用的Linux命令;Linux常用命令用法及实现方式

1.系统工作命令 (1)echo命令&#xff1a;echo命令用于在终端设备上输出字符串或变量提取后的值&#xff0c;语法格式为“echo [字符串] [$变量]”。 (2)date命令&#xff1a;date命令用于显示或设置系统的时间与日期&#xff0c;语法格式为“date [指定的格式]”。 (3)timedate…

VS2019 - error C2653: 不是类或命名空间名称

文章目录 VS2019 - error C2653: 不是类或命名空间名称概述笔记类的头文件类的实现文件备注END VS2019 - error C2653: 不是类或命名空间名称 概述 工程开了预编译头包含. 编码中, 随手写一个类, 将功能函数加入, 还没开始用这个类, 先习惯性的编译一下. 编译报错如下: St…

常用的17个运维监控系统(必备知识)

1. Zabbix Zabbix 作为企业级的网络监控工具&#xff0c;通过从服务器&#xff0c;虚拟机和网络设备收集的数据提供实时监控&#xff0c;自动发现&#xff0c;映射和可扩展等功能。 Zabbix的企业级监控软件为用户提供内置的Java应用服务器监控&#xff0c;硬件监控&#xff0c…

QT----写完的程序打包为APK在自己的手机上运行

目录 1、qt安装android组件2、打开qt配置Android 环境3、手机打开开发者模式&#xff0c;打开usb调试&#xff0c;连接电脑4、运行代码 1、qt安装android组件 qtcreater–工具-QTMaintenaceTool-startMaintenaceTool—登陆—添加或修改组件—找到android&#xff0c;安装 若是…

【脑切片图像分割】MATLAB 图像处理 源码

1. 简单图像处理 加载图像 Brain.jpg&#xff0c;使用直方图和颜色分割成区域这些区域有不同的颜色。 这是一个更高级的问题&#xff0c;有多个解决它的方法。 例如&#xff0c;您可以计算具有特定数字的图像的直方图&#xff08;例如 16 - 32&#xff09;&#xff0c;找到直方…

回归预测 | Matlab实现BiTCN基于双向时间卷积网络的数据回归预测

回归预测 | Matlab实现BiTCN基于双向时间卷积网络的数据回归预测 目录 回归预测 | Matlab实现BiTCN基于双向时间卷积网络的数据回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现BiTCN基于双向时间卷积网络的数据回归预测&#xff08;完整源码和数据&a…

Vue 3的Composition API和vue2的不同之处

Vue 3的Composition API是Vue.js框架的一个重要更新&#xff0c;它提供了一种新的组件逻辑组织和复用方式。在Vue 2中&#xff0c;我们通常使用Options API&#xff08;data、methods、computed等&#xff09;来组织组件的逻辑&#xff0c;但这种组织方式在处理复杂组件时可能会…

Czkawka 一款开源、免费的多功能重复文件清理工具,支持多平台

Czkawka (波兰语为 "打嗝"&#xff09;是一款简单、快速、免费的多功能重复文件清理工具&#xff0c;支持空文件、相似图像/视频/音频、损坏/无效文件的查找。 它扫描速度极快&#xff0c;并且适配 Linux、Windows、macOS、FreeBSD 等多个平台、支持中文。 &#x1…

bert 相似度任务训练简单版本,faiss 寻找相似 topk

目录 任务 代码 train.py predit.py faiss 最相似的 topk 数 任务 使用 bert-base-chinese 训练相似度任务&#xff0c;参考&#xff1a;微调BERT模型实现相似性判断 - 知乎 参考他上面代码&#xff0c;他使用的是 BertForNextSentencePrediction 模型&#xff0c;Bert…