Firefox的Linear Gradients (线性渐变) -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

更多相关链接:


相关日志:

刚刚被浏览过的文章:


条评论

  1. lbfmin
    发表了 2010年06月3日 在 10:49 上午 | 永久链接

    晕,老大,你这个演示效果根本就没有出来嘛,可能是有BUG,请查证一下。

个引用通告

  1. [...] 在ff和webkit的调用方式都还不一样,具体可以看这里和这里,说明的很清楚了 [...]

发表评论

Your email is never shared. 标记为 * 的为必填项目

*
*

评论时,昵称或个人网站填的是商业网站的,一概标记为垃圾评论不予显示,并设置相关网站为过滤关键字,提交到google、百度垃圾网站数据库