首页 >> 网络营销词典 >> 其他类别 >> css3渐变

css3渐变[编辑]


概述
CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。

CSS3 线性渐变

    为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

定义CSS3样式:

background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/

-moz-linear-gradient有三个参数。第一个参数表示线性渐变的方向,top是从上到下、left是从左到右,如果定义成left top,那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

css3背景颜色渐变

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

参考资料: CSS3 渐变:http://www.runoob.com/css3/css3-gradients.html 理解CSS3线性渐变:http://www.qianduan.net/understand-the-css3-gradient/
扩展阅读: css3教程:http://www.w3school.com.cn/css3/ css3百科:http://baike.baidu.com/link?url=W6tHYDedI_WGKpKpD4ApmETUGW2EZqR30aJjINJFdFr43zUuYquxhIlxOj7dYAHMw8l5AJMJ4OS_WY2OAAVyzK
相关词条:

css3动画:http://www.w3school.com.cn/css3/css3_animation.asp

合作编辑:

网络营销词典内容均由网友提供,仅供参考。如发现词条内容有问题,请发邮件至info # wm23.com。

词条信息

浏览次数:20

编辑次数:0历史版本

创建者: 李靖

最近更新:2015/10/29 4:45:42

词条分类导航

关于网络营销教学网站| 本站动态| 网站地图| 版权声明| 联系作者| 问题和建议|

版权声明:网络营销教学网站所有作品版权均归原作者所有,未经书面许可,严禁任何形式的转载/转贴、出版、篡改、汇编、编译等。