热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3渐变笔记(上)

CSS3渐变(gradients)可以让我们设置颜色的平稳过度。据我所知,有线性渐变(LinearGradients)和径向渐变(RadialGradient)两种。而它们也跟它

CSS3 渐变(gradients)可以让我们设置颜色的平稳过度。据我所知,有线性渐变(Linear Gradients)和径向渐变(Radial Gradient)两种。

而它们也跟它们的名字一样,线性渐变是从一个固定的方向进行渐变,而径向渐变,则是呈椭圆(圆)从中心向四周扩散。

先看下线性渐变linear-gradient

=linear-gradient([[|to],]?[,]+)

=[left|right]||[top|bottom]

 = [|]?

这里引用的是CSS手册中linear-gradient的语法。

我第一次看到这种东西的时候是一脸懵逼的,所以我简单的说一下这东西怎么读,清楚CSS语法的人可以略过。

“[]”表示这里面填的是一个字符串。

“<>”里表示此处应该填什么东西。例如指的就是这里填的是颜色。

而“|”则表示或,例如left|right 就指填left或right

“||”则指两边任选一或者都选,=[left|right]||[top|bottom]

就指可以是left,right,top,bottom,left top,right bottom等等。

“?”修饰前面的字符串,表示可以为0或可以为1,即这个字符串可以不填。

“+”表示后面可以添加一个或者多个同类型的字符串。

 

我们来看看linear-gradient的简单用法。

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


从图片就可以清楚看出颜色由下往上渐变,同理

background:linear-gradient(to top left,red,blue);


 

若用角度表示 background:linear-gradient(0deg,red,blue);

 

若用角度表示 background:linear-gradient(45deg,red,blue);

 

这个角度就是旋转的角度。

以此类推。

 

角度的单位是deg,用角度确定方向比起用top,left等等的词汇更加灵活,能有更多的变化

例如background:linear-gradient(100deg,red,white,blue);

这里的白线就能很直观的看出变化的方向。

 

我们来看看后面的颜色部分

background:linear-gradient(100deg,red,white,blue);

中颜色可以添加,但如果我们要控制各种颜色所占的范围,那么就要给颜色一个终止值。

这个值可以为百分比,也可以为固定数值。

例如background:linear-gradient(100deg,red,white 20%,blue);

 

background:linear-gradient(100deg,red,white 80%,blue);

 

终止位置指到这个位置时渐变为这个颜色。

通过这个原理,我们可以制作很多东西。

例如一个多段颜色组成的分隔条。

 

 background:linear-gradient(100deg,red 0%,red 20%,orange 20%,orange 40%,yellow 40%,yellow 60%,green 60%,green 80%,blue 80%,blue 100%);

这里面red 0%blue 100%都可以省略不要,并不会影响。渐变默认由最开始的颜色开始,由结尾的颜色结束。

 

 

     当然linear-gradient不仅仅只能做这一些简单的东西,通过相互组合,我们可以做出很多效果。

     例如网格背景

 background: linear-gradient(to left,transparent 20px,#92baac 20px,#92baac 22px,transparent 22px,transparent 42px,#92baac 42px,#92baac 44px),

linear-gradient(to bottom,transparent 20px,#92baac 20px,#92baac 22px,transparent 22px,transparent 42px,#92baac 42px,#92baac 44px);

background-color: white;

background-size: 44px 44px;

 

再举一个例子(素材来自于:http://lea.verou.me/css3patterns/)

background: linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,

linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),

linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);

background-color:#e1ebbd;

background-size: 128px 128px;

效果是这样的。


我们来分解一下代码。

分解:background:linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px;

 

这里的linear-gradient后面多了64px 64px

表示的是图案的偏移,去掉就是下图。


后面的偏移量表示的是向右,向上的值

 

linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px)

 

linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px)

 


尝试着两两组合,你会发现位于上面的linear-gradient会覆盖位于下面的linear-gradient。用这个方法,我们就可以做出很多的效果。

 

 

 

 


推荐阅读
author-avatar
php小白啊
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有