Gecko引擎的CSS渐变设计线性渐变的基本语法。

-moz-线性-渐变([点||角度，]？stop，stop[，stop]*)的参数描述：

点：定义了渐变的起点，数值包括数值和百分比。也可以使用关键字，其中左、中、右关键字定义x轴坐标，上、中、下关键字定义y轴坐标。当指定一个值时，另一个值默认为中心。

角度：定义线性渐变的角度。单位包括度、梯度(梯度，90度=100梯度)和弧度(弧度，一圈等于2 *弧度)。

Stop:定义步长，用法类似于Webkit引擎的color-stop()函数，但是这个参数可以直接传递，不需要调用函数。第一个参数设置颜色，可以是任何合法的颜色值，第二个值设置颜色的位置，是百分比(0~100%)还是数值，或者省略步长设置。

线性梯度的基本用法。

/*对于最简单的线性渐变，只需要指定开始颜色和结束颜色，那么默认情况下会从上到下实现线性渐变*/background :-moz-linear-gradient(红色、蓝色)；示范效应：

/*从左上角到右下角的渐变，其中top关键字设置起点的x轴，left关键字设置起点的y轴坐标*/background :-moz-linear-gradient(左上角、红色、蓝色)演示效果：。

/*从左到右设置多色渐变，其中y轴坐标默认为中心，按照步长平均显示多个色标*/背景：-moz-linear-gradient(左、红、橙、黄、绿、蓝、靛、紫)；示范效应：

/*红色从左上角到右下角逐渐淡化，其中红色逐渐减弱，最终显示为透明*/background :-moz-linear-gradient(左上角，红色，rgba (255，0，0，0))；示范效应：

/*设置角度值*/background :-moz-linear-gradient(0deg，red，rgba (255，0，0，0))；示范效应：

总结：指定角度后，沿水平线逆时针旋转。因此，设置0度将产生从左到右的水平渐变，而设置90度将产生从下到上的渐变。

/*自上而下的彩色渐变，其中在Y轴的80%处加入绿色色标，设计三色渐变效果。如果没有指定位置，三种颜色会均匀分布*/背景：-moz-线性-渐变(顶部，蓝色，绿色80%，橙色)；示范效应：

/*设计一个渐变半透明效果的背景图片，从左到右覆盖一个渐变填充层，从白色到透明*/Background :-moz-linear-gradient(右，rgba (255，255，255，0)，rgba (255，255，255，1))。示范效应：

径向梯度的基本语法。

-moz-径向-渐变([位置||角度，]？[形状] ||大小，]？Syop，stop[，stop]*)此功能的参数说明：

点：定义了渐变的起点，数值包括数值和百分比。也可以使用关键字，其中左、中、右关键字定义x轴坐标，上、中、下关键字定义y轴坐标。当指定一个值时，另一个值默认为中心。

角度：定义线性渐变的角度。单位包括度、梯度(梯度，90度=100梯度)和弧度(弧度，一圈等于2 *弧度)。

Stop:定义步长，用法类似于Webkit引擎的color-stop()函数，但是这个参数可以直接传递，不需要调用函数。第一个参数设置颜色，可以是任何合法的颜色值，第二个值设置颜色的位置，是百分比(0~100%)还是数值，或者省略步长设置。

3360定义了圆的半径，或椭圆的轴向长度n。

径向梯度的基本语法。

/*最简单的径向渐变是由红、黄到蓝从中间向外显示*/背景：-moz-径向-渐变(红、黄、蓝)；示范效应：

/*最简单的径向渐变用红、黄、蓝渐变从中间向外显示，设置不同色标的显示位置*/背景：-moz-径向-渐变(红20%、黄30%、蓝40%)；示范效应：

/*放射状渐变，由左下角向外的红、黄、蓝渐变显示，设置蓝色色标的显示位置*/background 3360-moz-放射状-渐变(左下角红、黄、蓝80%)；显示效果：

/*径向渐变，形状为圆形。从左中间向外逐渐由红、黄到蓝显示，设置蓝色色标*/background :-moz-radial-gradient的显示位置(左、圆、红、黄、蓝各50%)；示范效应：

/*径向渐变，椭圆形。由中间向外由红、黄、蓝逐渐显示，渐变大小设置为cover关键字*/background :-moz-radial-gradient(椭圆cover，红、黄、蓝)；示范效应：

摘要：大小参数包含几个关键词，即最近边、最近角、农民边、农民角、包含和覆盖。使用这些关键字定义径向渐变的大小。

此外，Gecko引擎还定义了两个属性——moz-重复-线性-渐变和-moz-重复-径向-渐变，用于定义重复线性渐变和重复径向渐变。

background :-moz-repeating-radial-gradient(圆形、黑色、黑色10px、白色10px、白色20px)；示范效应：

背景：-moz-重复-线性-渐变(左上角60度，黑色，黑色10px，白色10px，白色20px)；示范效应：

梯度的应用。

meta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /titleWebkit引擎应用程序/title style type=' text/CSS ' body {/*页面初始化*/background-color : # 454545；余量：1 em；划水：0；}.box {/*设计模块样式*/-moz-border-radius : 10px；/*设计圆角*/-moz-box-shadow : 0012 px 1pxrgba(205，205，205，1)；/*设计阴影效果*/border: 1px纯黑；padding: 10px最大宽度： 600 px；/*最大宽度显示*/margin 3360 auto；/*中央显示屏*/text-shadow:黑色1px 2px 2px/*设计文本包含阴影*/color:白色；背景-image :-moz-linear-gradient(底部，黑色，rgba(0，47，94，0.2)，白色)；/*设计线性渐变背景*/背景色： RGBA (43，43，43，0.5)；}.box:hover {/*鼠标经过时放大阴影亮度*/-moz-box-shadow : 0012 px 5px rgba(205，205，205，1)；}h2 {/*在标题前添加额外内容*/font-size : 120%；font-weight : bold；文本修饰：下划线；} h 2:先于{ content : ' title:'；} p { padding: 6pxtext-indent :2 em；线高：1.8毫米；font-size :14 px；}/style/head dydiv class=' box ' H2 about words/h2pI我很快就能开始使用任何类型的单词。有一次花了一天时间读《第一次亲密接触》，然后第二天写了两万多字的类似的东西，让同学们惊呆了。虽然我觉得那种东西存在的价值不大，但是时间很容易淹没它，不留痕迹。/p p我扔掉了考试得满分的作文，却把老师说的毫无意义的文章装订起来，放在抽屉里。我经常写下我的故事给同学看，然后他们被感动得一塌糊涂。/p p …/p/div/body/html演示效果：