5分钟速成渐变色css

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

我们可以将图片分为两块

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

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

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

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

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

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

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

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

小试牛刀:

html 复制代码
<!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格式等方法实现

相关推荐
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止8 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall8 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴8 小时前
简单入门Python装饰器
前端·python
袁煦丞9 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作