5分钟速成渐变色css

作者：你好赵伟 | 2024-03-05 15:23:18

踩

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格式等方法实现

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/191994

5分钟速成渐变色css

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

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

小试牛刀：

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

规律【方向（颜色1，颜色2，颜色3）】 = 渐变色

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