Firefox的Linear Gradients (线性渐变)在线调试工具

 这是一款可在线调试并预览Firefox的Linear Gradients (线性渐变)的在线调试工具。右侧具有实时调试并显示预览效果的功能,同时能够实时生成对应的效果代码,代码下方还针对线性渐变的原理与用法进行了详尽的解释说明,方便需要的朋友使用。


效果设置区

基本效果

%
%
%

停靠

%
删除停靠添加停靠

效果预览区

代码区

说明

Safari 4 Firefox 3.6 Opera Chrome Internet Explorer

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