2065阅读
2回复

CSS渐变之CSS3 gradient在Firefox3.6下的使用支持FF(原创教程) [复制链接]

只看楼主倒序阅读使用道具楼主 梦舞飞扬 发表于: 2013-06-11

作者：pwdesign

原文：
Firefox3.6包含了许多CSS的改进，本文将向您展示如果使用CSS渐变。
如果你正在运行的Firefox 3.6的最新测试版，你应该看看我们的互动演示，并查看相应的代码。使用单选按钮来切换不同的样式选项。

含CSS渐变的背景(backgrounds)

背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用，放大时也比较好看，可以让您创造出一个更灵活的布局。
Firefox支持两种类型的CSS渐变：线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。

线性渐变(Linear Gradients)

要创建一个线性渐变，您需要设置一个起点和一个渐变的方向（或角度），并定义起止颜色。
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
起始点(Starting Point)：起点的工作方式类似于background position。您可以设置水平和垂直位置为百分比，或以像素为单位，或在水平方向上可以使用left/center/right，在垂直方向上可以使用top/center/bottom。位置起始于左上角。如果你不指定水平或垂直位置，它将默认为center。
例如，这里是一个线性渐变，开始于center（水平发现）和top（垂直发现），并从蓝色到白色。

代码如下：
.linear_gradient_square {width: 100px;height: 100px;border: 1px solid #333;background: -moz-linear-gradient(top, blue, white);}
或者是起始于left（水平方向）和center（垂直方向）

主要部分代码如下：
background: -moz-linear-gradient(left, blue, white);
或者是起始于left（水平方向）和top（垂直方向）

主要部分代码如下：
background: -moz-linear-gradient(left top, blue, white);
角度(Angle)：正如您在上面看到的，如果您不指定一个角度，它会根据起始位置自动定义。如果你想更多的控制渐变的方向，您不妨设置角度试试。
例如，下面的两个渐变具有相同的起点left center，但是右手边的有一个20度的角度。

后面一个含有角度的渐变核心代码如下：
background: -moz-linear-gradient(left 20deg, black, white);
当指定的角度，请记住，它是一个由水平线与渐变线产生的的角度，逆时针方向。因此，使用0deg将产生一个左到右横向梯度，而90度将创建一个从底部到顶部的垂直渐变。

核心代码如下：
background: -moz-linear-gradient(<angle>, red, white);
起止颜色(Color Stops)：除了起始位置和角度，你应该指定起止颜色。起止颜色是沿着渐变线，将会在指定位置（以百分比或长度设定）含有指定颜色的点。色彩的起止数是无限的。如果您使用一个百分比位置，0％代表起点和100％是终点，但区域外的值可以被用来达到预期的效果。
下面是一个简单的例子，三个起止颜色。因为第一个和最后的颜色并未指定颜色点，他们将显示为默认的0％和100％。

本部分内容设定了隐藏，需要回复后才能看到

（申明：此教程来源于网络，转载请注明作者，如需商业用途请与作者联系。请支持原创！）