CSS3线性渐变简单实现以及该属性在浏览器中的不同


Posted in HTML / CSS onDecember 12, 2012

为了显示一个渐变而专门制作一个图片的做法是不灵活的,而且很快会成为一种不好的做法。但是遗憾的是,截至写这篇文章,可能还必须这样做,但是希望不会持续太久。多亏Firefox 和Safari/Chrome,我们现在可以使用最少的努力实现强大的渐变。在本文中,我们将展示CSS渐变的简单实现以及该属性在Mozilla和webkit内核浏览器中的不同。
PS:本文原文本来提供了一个视频,但是由于众所周知的原因,我们无法观看这个在Youtube上的视频,想看的同学请自己想办法观看(最高720P) : http://www.youtube.com/watch?v=9D2hyM5SSCE

Webkit
尽管Mozilla和Webkit通常对CSS3属性采取同样的语法,但是对于渐变,他们很不幸的不能达成一致。Webkit是第一个支持渐变的浏览器内核,它使用下面的结构:

复制代码
代码如下:

/* 语法,参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

CSS3线性渐变简单实现以及该属性在浏览器中的不同 
不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))

Mozilla
Firefox,从3.6版本才开始支持渐变,更喜欢和Webkit略微不同的语法。

复制代码
代码如下:

/* 语法,参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */ -moz-linear-gradient( [
<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

CSS3线性渐变简单实现以及该属性在浏览器中的不同 
请注意我们将渐变的类型——linear——放到了属性前缀中了
渐变从哪里开始? (top – 我们也可以使用度数,比如-45deg)
开始的颜色? (red)
结束的颜色? (blue)

Color-Stops
如果你不需要从一个颜色到另一个颜色的100%渐变怎么办?这就是color stop起作用的时候了。一个普遍的设计技术是使用一个较短而细微的渐变,比如:
CSS3线性渐变简单实现以及该属性在浏览器中的不同
注意顶部的浅灰色到白色的细小的渐变
在过去,标准的做法就是制作一个图片,并将其设为一个元素的背景图片,然后让其水平平铺。然而使用CSS3,这是个小Case。

复制代码
代码如下:

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white));
border-top: 1px solid white;

这次,我们让渐变结束于8%,而不是默认的100%。请注意我们也在头部采用了一个边框,以形成对比。这很常用。
如果我们想要添加多一种(几种)颜色,我们可以这样做:
复制代码
代码如下:

background: white; /* 备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%, red 20%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#dedede), color-stop(8%, white), color-stop(20%, red);

对于-moz 版本,我们定义,从元素的20%的高度的地方开始是红色。
而对于-webkit,我们使用color-stop,采用两个参数:哪里开始停止,使用哪种颜色。

IE
IE并不支持CSS渐变,但是提供了渐变滤镜,可以实现最简单的渐变效果:

复制代码
代码如下:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff0000')"; /* IE8 */

PS:事实上,我们在《RGBa色彩的浏览器支持》提到的IE的解决方法,就是使用这个渐变滤镜。

关于CSS渐变的一些要点
尽可能的使用它。如果让IE用户看到一个固定的纯色,我鼓励你使用这种方法;
IE6/7/8, Opera, Safari 3, 和Firefox 3 不能渲染CSS3 渐变,Firefox 和Safari用户通常经常升级浏览器,而Chrome的自动升级机制会在后台自动升级,所以这并不是个大问题;
总是为不支持这些浏览器私有属性的浏览器应用一个默认的,纯色背景;
永远不要使用红色到蓝色的渐变,就像我用作例子的这种;
页面无须在每个浏览器里面看起来完全一样!
Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标。

HTML / CSS 相关文章推荐
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
HTML5页面音频自动播放的实现方式
Jun 21 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 #HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 #HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 #HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 #HTML / CSS
html5 css3 动态气泡按钮实例演示
Dec 02 #HTML / CSS
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 #HTML / CSS
CSS3悬停效果案例应用
Nov 21 #HTML / CSS
You might like
php中的数组操作函数整理
2008/08/18 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
JavaScript中的连字符详解
2013/11/28 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python中redis的安装和使用
2016/12/04 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
用python实现的线程池实例代码
2018/01/06 Python
python requests post多层字典的方法
2018/12/27 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
水产养殖学应届生求职信
2013/09/29 职场文书
节水口号标语
2014/06/19 职场文书
嘉宾邀请函
2015/01/31 职场文书
银行实习推荐信
2015/03/27 职场文书
社区安全温馨提示语
2015/07/14 职场文书
小学运动会入场口号
2015/12/24 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
实例详解Python的进程,线程和协程
2022/03/13 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers