css3 渐变 各浏览器兼容
Firefox的Linear Gradients (线性渐变)的几点说明:
- Firefox的Linear Gradients (线性渐变) 基本语法:background-image:-moz-linear-gradient([<point> | | <angle>,] , 开始颜色值,结束颜色值, [(停靠颜色值,偏移量百分数),...] );
- -moz-linear-gradient是background的一个属性值;
- 第一组参数<角度位置>为非常灵活,他的基本组成点位 <point> ( 渐变的出发点 )和角度;
- <point> 渐变的出发点: 它可以被指定为一个百分比,像素,或使用“left”,“center”或“right”的水平和“top”,“center”,或“buttom”的垂 直定位。 位置从最受影响的元素左上角。
- 如果只在水平渐变的话,只要设置:“left center”或“right center”,如果垂直渐变的话设置“center top”或者“center buttom”。Firefox下可以省略掉 “center”,也就是如果只在水平渐变的话,只要设置:“left”或“right”,如果垂直渐变的话设置“top”或者“buttom”。(查看例子)
- 如果这两个值是百分比的值的话,那么第一个是水平渐变位置,第一个是垂直渐变位置,这个时候还需要一个角度值,比如 “90deg”;这个可以看本页的例子;
- 还可以是只有一个角度值。(查看例子)
- (开始颜色值),(结束颜色值)是两个渐变颜色值;
- [(停靠颜色值,偏移量百分数),...]:可以使用多个color-stop,如果渐变只有2个颜色,那么可以不使用该参数;偏移 量必须为0%~100%;
- webkit内核的safari、 Chrome下的Linear Gradients (线性渐变) 请参阅:http://www.css88.com/archives/2154
- ie下可以使用渐变滤镜,请参阅: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx
Firefox的Linear Gradients (线性渐变)的演示:http://www.css88.com/tool/css3Preview/Linear-Gradients-moz.html
前望