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

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

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

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

  1. -webkit-linear-gradient
  2. -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代表外部渐变结束圆的半径。

CSS3中渐变gradient详解的更多相关文章

  1. 第98天:CSS3中transform变换详解

    transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...

  2. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  3. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

  4. CSS3中REM使用详解

    px 在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改 ...

  5. 第100天:CSS3中animation动画详解

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由“keyframes”这个属性来 ...

  6. CSS3之渐变Gradient

    渐变是CSS3中比较好玩的属性,学会了渐变,那么可以做出非常炫的东东哟.CSS3 中渐变——Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  7. CSS3的@keyframes用法详解:

    CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...

  8. ArcGIS Engine中的Symbols详解

    转自原文ArcGIS Engine中的Symbols详解 本文由本人翻译ESRI官方帮助文档.尊重劳动成果,转载请注明来源. Symbols ArcObjects用了三种类型的Symbol(符号样式) ...

  9. php中关于引用(&)详解

    php中关于引用(&)详解 php的引用(就是在变量或者函数.对象等前面加上&符号) 在PHP 中引用的意思是:不同的变量名访问同一个变量内容. 与C语言中的指针是有差别的.C语言中的 ...

随机推荐

  1. OpenStack tokens id获取测试

     

  2. EasyUI-在iframe里获取现阶段选中的tab的标题

    在iframe里获取当前选中的tab的标题(easyui) var currTab =$$('#tabs').tabs('getSelected'); console.info(currTab.pan ...

  3. CSS3 Animation 基于 less 构建的 css3 动画库

    LESS动画优点 · 快速开发css3动画 · 采用less mixins写法,不会生成冗余css · 已加入主流浏览器前缀,保证最大兼容性 · LESS-Animation 部分mixins支持传参 ...

  4. Redis缓存服务搭建及实现数据读写

    发现博客园中好多大牛在介绍自己的开源项目是很少用到缓存,比如Memcached.Redis.mongodb等,今天得空抽时间把Redis缓存研究了一下,写下来总结一下,跟大家一起分享 一下.由于小弟水 ...

  5. TP复习14

    ## ThinkPHP 3.1.2 控制器的模块和操作#讲师:赵桐正微博:http://weibo.com/zhaotongzheng 本节课大纲:一.空模块和空操作 1.空操作 function _ ...

  6. iOS开发——实用技术OC篇&简单抽屉效果的实现

    简单抽屉效果的实现 就目前大部分App来说基本上都有关于抽屉效果的实现,比如QQ/微信等.所以,今天我们就来简单的实现一下.当然如果你想你的效果更好或者是封装成一个到哪里都能用的工具类,那就还需要下一 ...

  7. lambda形式(转)

    lambda语句被用来创建新的函数对象,并且在运行时返回它们. 使用lambda形式 #!/usr/bin/python# Filename: lambda.py def make_repeater( ...

  8. HANDLER命令与实现

    MySQL“自古以来”都有一个神秘的HANDLER命令,而此命令非SQL标准语法,可以降低优化器对于SQL语句的解析与优化开销,从而提升查询性能.看到这里,可能有小伙伴不淡定了,这么好的东西为啥没广泛 ...

  9. scala目录

    1. 使用Scala(构建这样一个应用,它会取回一份列表,其中包括用户持有的股票的代码以及股份,并告知他们在当前日期为止的这些投资的总价.这包含了几件事:获取用户输入.读文件.解析数据.写文件.从We ...

  10. oracle内置sql函数(转)

    转自:http://www.cnblogs.com/yening10000/archive/2009/07/02/1515284.html F.1字符函数——返回字符值 这些函数全都接收的是字符族类型 ...