当前位置:首页>在线课程>网页设计>Div+CSS>CSS3 技术与浏览器兼容性解析(已完结)>实现线性渐变的页面背景颜色

[第38课] 实现线性渐变的页面背景颜色

讲师:李晓斌  长度:13分02秒  软件:Div+CSS  发布日期:2018年04日03日
视频课程:[CSS3 技术与浏览器兼容性解析(已完结)]
视频播放界面 播放按钮
分享到:
课程介绍
  

使用CSS 3来实现渐变效果,其实和使用图像处理软件中的渐变工具没有什么区别。首先指定一个渐变的方向、起始颜色和结束颜色,具有这3个参数就可以制作出一个最简单、最普通的渐变效果。

相对于其他的CSS 3属性的语法而言,CSS 3线性渐变的语法要复杂许多。在早期的各种不同核心的浏览器中CSS 3线性渐变语法不尽相同,特别是在Webkit核心的浏览器中还分为新旧两种版本。接下来分别介绍不同核心浏览器中CSS 3线性渐变的语法。

1.Webkit核心浏览器中CSS 3线性渐变语法

Webkit是第一个支持 CSS 3渐变的浏览器引擎,不过其语法也比其他核心的浏览器要复杂,还分为新旧两个不同的版本。

(1)Webkit核心浏览器旧版本语法格式如下。

-webkit-gradient(<type>,<point>,<point>,from(<color>),to(<color>) [,color-stop(<percent>, <color>)]*)

Webkit核心旧版本语法中各参数说明如下表所示。

Webkit核心旧版本线性渐变语法的示例如下。

-webkit-gradient(linear,left top,left bottom,from(#FFF),to(000))

(2)Webkit核心浏览器新版本语法格式如下。

-webkit-linear-gradient([<point> || <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

Webkit核心新版本语法中各参数说明如下表所示。

Webkit核心新版本线性渐变语法的示例如下。

-webkit-linear-gradient(top,#FFF,#000)

2.Gecko核心浏览器中CSS 3线性渐变语法

Gecko核心的浏览器Firefox在3.6版本开始支持CSS 3中的线性渐变属性。Gecko核心与Webkit核心的新版本渐变语法格式基本相同,只是使用的私有属性前缀不同。

Gecko核心的线性渐变语法格式如下。

-moz-linear-gradient([<point> | <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

在Gecko核心的线性渐变中共有3个参数,第一个参数表示线性渐变的方向,例如top是从上至下、left是从左至右,如果定义成“left top”,就是从左上角至右下角。第2个和第3个参数分别是起点颜色和终点颜色,还可以在它们之间插入更多的颜色参数,表示多种颜色的渐变。

Gecko核心线性渐变的示例如下。

-moz-linear-gradient(top,#FFF,#000)

3.Presto核心浏览器中CSS 3线性渐变语法

Presto核心的Opera浏览器在11.6版本开始支持CSS 3的线性渐变。在Presto核心浏览器中CSS 3线性渐变的使用语法与Gecko核心浏览器中的线性渐变语法基本相同,只是使用的私有属性前缀不同。

Presto核心的线性渐变语法格式如下。

-o-linear-gradient([<point> || <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

-o-linear-gradient语法中的参数与前面介绍的-moz-linear-gradient中的参数是完全相同的,这里不再重复介绍。

4.Trident核心浏览器中CSS 3线性渐变语法

Trident核心的浏览器主要是IE浏览器,早期版本的IE浏览器是不支持CSS 3线性渐变属性的,不过在IE 10开始支持这个属性。这里主要针对IE 10及以上版本的IE浏览器的CSS 3线性渐变进行简单的介绍。

Trident核心的线性渐变语法格式如下。

-ms-linear-gradient([<point> || <angle>,]?<color>[,(<color>[<percent>]?)]*,<color>)

-ms-linear-gradient语法中的参数与前面介绍的-moz-linear-gradient中的参数是完全相同的,这里不再重复介绍。

5.W3C标准线性渐变语法

W3C组织于2012年4月发布了CSS 3线性渐变的候选人推荐版本,这一次发布的CSS 3渐变属性有很大的化,使用语法较前面的版本要简单。目前许多现在浏览器都已经开始支持W3C的标准线性渐变语法。

W3C标准线性渐变语法格式如下。

linear-gradient([[<angle> || to <side-or-corner>],]?<color-stop>[,<color-stop>]+)

W3C标准线性渐变语法中包含三个主要的参数,第一个参数用于指定渐变的方向,同时决定渐变颜色的停止位置,这个参数值可以省略,当省略时其取值为to bottom。决定渐变的方向主要有两种方法。

 <angle>:通过角度来确定渐变的方向。

 关键词:通过关键词来确定渐变的方向。例如“to top”、“to right”、“to bottom”和“to left”。这些关键词对应的角度值为0deg、90deg、180deg和270deg。除了使用“to top”、“to left”之外,还可以使用“top left”右上角至左下角,“top right”左上角至右下角。

第二个和第三个参数表示渐变起始点和结束点的颜色,也可以从中插入更多的颜色值,从而形成多种颜色的渐变效果。

注意事项
-如果您在任何场合索要、传播、出售、租借学设计网出品原创视频教程,我们一律进行封号、封ip等措施处理,请务必珍惜您的帐号。无论传播还是索取,我们都会进行封号处理。
-由于您对视频教程的言论、索要、传播、出售、租借,对学设计网造成的间接或直接经济损失,我们将追究您的法律责任,并有权索回对我们造成的经济损失。
-只要您浏览本网页我们就将视您已经阅读了本注意事项中所有条例,并且同意本事项的所有条例。
-学设计网拥有以上事项的最终解释权。
教程评论

您必须 [ 登录 ] 才能发表评论!

如何观看全部课程
VIP会员399元1年可享受的权限:
观看下载所有视频教程
下载未来一年更新教程
可加入VIP群进行技术讨论
可下载所有资源(源文件和素材)
第二年续费仅为279元

推荐课程

[网页设计] PHP动态网站开发实例教程(持续更新)

讲师:李晓斌

35

课时
推荐图文教程
推荐书籍
首 页在线课程书籍光盘图文教程
点击这里给我发消息47707077
点击这里给我发消息11402485
联系电话

13520020606

联系邮箱
47707077@qq.com
营业执照  |  网上有害信息举报  |  Copyright © 2017 学设计网, All Rights Reserved  |  京ICP备14050932号