html渐变色css3渐变,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。