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 (线性渐变) 请参阅:https://www.html.cn/archives/2154
  • ie下可以使用渐变滤镜,请参阅: http://msdn.microsoft.com/en-us/library/ms532997(VS.85).aspx

Firefox的Linear Gradients (线性渐变)的演示:https://www.html.cn/tool/css3Preview/Linear-Gradients-moz.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Firefox的Linear Gradients (线性渐变) -Css3演示

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

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

    lbfmin9年前 (2010-06-03)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏