gradient设置上下渐变_CSS3中渐变gradient详解

这几天看了一本HTML5的书，里面对于页面的背景使用了大量的渐变效果，因此在这里写一些关于渐变Gradient的东西。

CSS3中的Gradient有两种，分别是线性渐变(linear-gradient)和径向渐变(radial-gradient),下面分别是线性与径向渐变的效果(用Flash画的,习惯了 O(∩_∩)O哈哈~。☺)

首先说一下webkit的浏览器(谷歌的Chrome啊等等)

webkit下对于Gradient定义了两种方法：

-webkit-linear-gradient

-webkit-gradient

-webkit-linear-gradient方法定义的是线性渐变，先来个代码和效果

background:-webkit-linear-gradient(top left,#ccc,#369);

这个例子是从左上角的#ccc灰色渐变到右下角的#369蓝色，从代码中可以看出-webkit-linear-gradient的第一个参数是描述渐变方向，top指从上到下，left指从左到右，top left指的就是从左上到右下，后面的颜色值分别指的是开始和结束的颜色，当然中间可以添加很多个颜色并且能够设置颜色范围。如下面的例子

background:-webkit-linear-gradient(top left,#ccc 10%,#3f3 50%,#369);

其它浏览器比如说FireFox或者是IE中Gradient的用法和在webkit中的-webkit-linear-gradient差不多，变得只是厂商的前缀，例如:

-moz-linear-gradient、-o-linear-gradient、-ms-linear-gradient。

接下来再说一下 -webkit-gradient

-webkit-gradient相对于-webkit-linear-gradient不同的内容就是可以设置线性渐变还是径向渐变

先说一下线性渐变:

background:-webkit-gradient(linear,center top,right bottom,from(#c33),color-stop(50%,#ccc),to(#cfc));

从上面的代码中可以看出，它的第一个参数是用来设置是线性还是径向渐变，线性渐变即为linear

第二个参数设置渐变从哪里开始，这里的值需要有两部分(x y)，x就是设置水平位置，比如说left、right或者是center，而y就是用来设置垂直位置，比如说top或者bottom。

第三个参数设置渐变到哪里。之后有一个from和一个to，分别用来表示从那种颜色变换到哪一种颜色，而color-stop就是用来设置从from到to这中间的颜色。

下面再说一下设置径向渐变，也是先上代码~

background:-webkit-gradient(radial, 95 45, 15, 102 70,60, from(#c33), to(#cdc), color-stop(80%, #00b5e2));

进行径向渐变的语法为

-webkit-gradient(radial, inner_center, inner_radius, outer_center, outer_radius, / stop...)

其中inner_center代表内部中心点，径向渐变起始圆环，inner_radius代表内部半径，径向渐变起始圆，outer_center代表外部渐变结束圆的中心点，outer_radius代表外部渐变结束圆的半径。

gradient设置上下渐变_CSS3中渐变gradient详解相关推荐

Android设置中“强行停止”详解
Android设置中"强行停止"详解最近工作上遇到了广播接受不到的问题,查看了<Android 开发艺术探索>一书中关于广播的发送和接受的章节(P356-P362). ...
html里的section可以设置id,html5中section元素详解
html5中section元素详解一.总结一句话总结: section元素用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
ArcGIS Engine中的Symbols详解
转自原文 ArcGIS Engine中的Symbols详解本文由本人翻译ESRI官方帮助文档.尊重劳动成果,转载请注明来源. Symbols ArcObjects用了三种类型的Symbol(符号样式 ...
html中transition默认,CSS3中的Transition详解
W3C标准中对css3的transition这是样描述的:"css的transition允许css的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改 ...
Asp.net中GridView使用详解(引)【转】
Asp.net中GridView使用详解(引) GridView无代码分页排序 GridView选中,编辑,取消,删除 GridView正反双向排序 GridView和下拉菜单DropDownList ...
Linux中etc目录详解
Linux中etc目录详解 /etc目录包含很多文件.许多网络配置文件也在/etc 中. /etc/rc or/etc/rc.d or/etc/rc*.d 启动.或改变运行级时运行的sc ...
DevExpress控件GridControl中的布局详解【转】
DevExpress控件GridControl中的布局详解 [转] 2012-10-24 13:27:28| 分类: devexpress | 标签:devexpress |举报|字号订阅 h ...
java的static类_java中staticclass静态类详解
一般情况下是不可以用static修饰类的.如果一定要用static修饰类的话,通常static修饰的是匿名内部类. 在一个类中创建另外一个类,叫做成员内部类.这个成员内部类可以静态的(利用static ...
JavaWeb中filter的详解及应用案例
JavaWeb中filter的详解及应用案例转载自:http://www.cnblogs.com/vanl/p/5742501.html 一:Filter介绍 Filter可认为是Servlet的一 ...
python2.7读取excel_对Python2.7pandas中的read_excel详解
这篇文章主要介绍了关于对Python 2.7 pandas 中的read_excel详解,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下导入pandas模块: import panda ...

gradient设置上下渐变_CSS3中渐变gradient详解

gradient设置上下渐变_CSS3中渐变gradient详解相关推荐

最新文章

热门文章