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

  • 13
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值