总结一下CSS3颜色渐变的用法和兼容问题
两种颜色渐变:
background: -moz-linear-gradient(top, #ccffcc, #339933);//火狐
background: -o-linear-gradient(top, #ccffcc, #339933);//欧朋,苹果
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccffcc), to(#339933));//谷歌
background:gradient(渐变方向,起点颜色,终点颜色);
火狐,苹果渐变方向规则如下:
一个参数:left=从左到右,top=从上到下,以此类推
两个参数:left,top=从左上角到右下角,以此类推
谷歌渐变方向规则如下:
linear:线性渐变,radial:径向渐变即从圆心向外扩散
0% 0%为起点位置(左上角)。0% 100%(右上角)
from为起点颜色 to为终点颜色
上面代码的效果图如下:
三种及以上种颜色渐变:
background: -moz-linear-gradient(top, #ffffcc, #ff9966, #ffffcc);
background: -o-linear-gradient(top, #ffffcc, #ff9966, #ffffcc);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0, #ffffcc), color-stop(0.5, #ff9966), color-stop(1, #ffffcc));
多种颜色渐变略有不同:
火狐,苹果只要加上多种颜色就可以了
谷歌需要甬color-stop设置中间点0-1之间随意设置
上面代码的效果图如下:
(图片都有边框)
ps:有错误希望指正