01之04
使用CSS3创建跨浏览器线性渐变
线性渐变
您将看到的最常见的渐变类型是两种颜色的线性渐变。 这意味着渐变将沿直线从第一个颜色逐渐变为第二个直线。 此页面上的图像显示简单的从＃999（深灰色）到#fff（白色）的从左到右的渐变。
线性渐变是最容易定义的，并且在浏览器中支持最多。 Android 2.3+，Chrome 1+，Firefox 3.6+，Opera 11.1+和Safari 4+均支持CSS3线性渐变。 Internet Explorer可以使用筛选器添加渐变并将它们支持回IE 5.5。 这不是CSS3，但它是跨浏览器兼容性的选项。
当你定义一个渐变时，你需要定义几个不同的东西：
- 它是什么类型的梯度 - 线性或径向
- 应该开始渐变的地方
- 应该停止渐变的地方
- 渐变中有什么颜色，以及它们应该在哪里开始和停止
要使用CSS3定义线性渐变，请编写：
线性渐变（ 角度或侧面或角落 ， 停止 颜色 ， 停止 颜色 ）
- 首先，用名称linear -gradient定义渐变类型。
- 然后，您可以通过以下两种方式之一来定义渐变的开始点和停止点：以0度到359度的直线角度，0度直线朝上。 或者使用“侧面或角落”功能，例如左侧，右侧，底部和顶部。 这些将在下一页更详细地解释。 如果将这些排除，则渐变将从元素的顶部流向底部。
- 然后你定义彩色中止。 您可以使用颜色代码和可选百分比来定义颜色停留。 该百分比告诉浏览器在线上以该颜色开始或结束的位置。 默认设置是沿着线条均匀地放置颜色。 您将在第3页学习更多关于色彩停止的知识。
所以，要用CSS3定义上面的渐变，你可以这样写：
线性梯度（左，＃999999 0％，#ffffff 100％）;
并将其设置为您编写的DIV的背景：
div {
background-image：线性渐变（左，＃999999 0％，#ffffff 100％;
}
浏览器扩展CSS3线性渐变
为了让您的渐变能够跨浏览器使用，您需要为大多数浏览器使用浏览器扩展，并为Internet Explorer 9及更低版本（实际上是2个过滤器）使用过滤器。 所有这些都采用相同的元素来定义您的渐变（除了您只能在IE中定义2色渐变）。
微软过滤器和扩展 - 互联网浏览器是最具挑战性的支持，因为你需要三条不同的线路来支持不同的浏览器版本。 要获得上面的灰色到白色渐变，你会写：
/ * IE 5.5-7 * /
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）;
/ * IE 8-9 * /
-ms-filter：“progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）”;
/ * IE 10 * /
-ms-linear-gradient（left，＃999999 0％，#ffffff 100％）;
Mozilla扩展 - -moz-扩展的工作方式与CSS3属性类似，只是-moz-扩展。 要获得Firefox的上述渐变，请写下：
-moz-linear-gradient（left，＃999999 0％，#ffffff 100％）;
Opera扩展 - -o扩展为Opera 11.1+添加了渐变效果。 要获得上述渐变，请写下：
-o-linear-gradient（left，＃999999 0％，#ffffff 100％）;
Webkit扩展 -webkit扩展的工作方式与CSS3属性非常相似。 要为Safari 5.1或Chrome 10+定义上述渐变，请编写以下代码：
-webkit-linear-gradient（left，＃999999 0％，#ffffff 100％）;
还有一个老版本的Webkit扩展，可以与Chrome 2+和Safari 4+配合使用。 在其中，您可以将渐变的类型定义为值，而不是在属性名称中。 要使用此扩展名将灰色渐变为白色渐变，请写下：
-webkit-gradient（线性，左上，右上，停止颜色（0％，＃999999），停止颜色（100％，＃ffffff））;
完整的CSS3线性渐变CSS代码
要获得完整的跨浏览器支持以获得上面的灰色到白色渐变，首先应该为不支持渐变的浏览器提供后备纯色，最后一项应该是完全符合浏览器的CSS3样式。 所以，你写道：
背景：＃999999;
背景：-moz-linear-gradient（left，＃999999 0％，#ffffff 100％）;
背景：-webkit-gradient（线性，左上，右上，颜色停止（0％，＃999999），停止颜色（100％，＃ffffff））;
background：-webkit-linear-gradient（left，＃999999 0％，#ffffff 100％）;
背景：-o-linear-gradient（left，＃999999 0％，#ffffff 100％）;
背景：-ms-linear-gradient（left，＃999999 0％，#ffffff 100％）;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）;
-ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃999999'，endColorstr ='＃ffffff'，GradientType = 1）;
背景：线性渐变（左，＃999999 0％，#ffffff 100％）;
本教程的下一页将更详细地解释渐变的各个部分，最后一页将指向一个工具，该工具是自动创建CSS3渐变的绝佳方式。
只用CSS就可以看到这个线性渐变。
04年02月
创建对角渐变 - 渐变的角度
起点和终点确定梯度的角度。 大多数线性渐变是从上到下或从左到右。 但是可以建立在对角线上移动的渐变。 此页面上的图像显示了一个简单的渐变，从右向左以45度角在整个图像上移动。
角度定义渐变线
角度是元素中心的一个假想圆上的一条线。 0deg指向上，90deg指向右侧，180deg指向下，270deg指向左侧。 您可以定义0到359度之间的任何角度。
您应该注意，在正方形中，45度角从左上角移动到右下角，但在矩形中，开始点和结束点稍微偏离形状，如图所示。
定义对角线渐变的更常用方法是定义一个角，如右上角，渐变将从该角移动到对角。 您可以使用以下关键字定义起始位置：
- 最佳
- 对
- 底部
- 剩下
- 中央
它们可以被组合成更具体的，例如：
- 右上
- 左上方
- 顶尖中心
- 右下角
- 左下方
- 底部中心
- 正确的中心
- 左中心
这里是与图片类似的渐变的CSS，从右上角到左下角的红色到白色：
背景：## 901A1C;
background-image：-moz-linear-gradient（右上角，＃901A1C 0％，＃FFFFFF 100％）;
background-image：-webkit-gradient（线性，右上，左下，停止颜色（0，＃901A1C），停止颜色（1，#FFFFFF））;
背景：-webkit-linear-gradient（右上角，＃901A1C 0％，#ffffff 100％）;
背景：-o-linear-gradient（右上角，＃901A1C 0％，#ffffff 100％）;
背景：-ms-linear-gradient（右上角，＃901A1C 0％，#ffffff 100％）;
背景：线性梯度（右上角，＃901A1C 0％，#ffffff 100％）;
您可能已经注意到在这个例子中没有IE过滤器。 这是因为IE只允许两种类型的过滤器：从顶部到底部（默认）和从左到右（使用GradientType = 1开关）。
只用CSS就可以看到这个对角线性渐变。
03之04
颜色停止
使用CSS3线性渐变，您可以将多种颜色添加到渐变中以创建更出色的效果。 要添加这些颜色，请在属性的末尾添加其他颜色，并用逗号分隔。 你应该包括颜色应该开始或结束的位置。
Internet Explorer过滤器仅支持两种颜色停止，因此，在构建此渐变时，应仅包含要显示的第一种和第二种颜色。
以下是上述3色渐变的CSS：
背景：#ffffff;
背景：-moz-linear-gradient（left，#ffffff 0％，＃901A1C 51％，#ffffff 100％）;
背景：-webkit-gradient（线性，左上方，右上方，颜色停止（0％，＃ffffff），停止颜色（51％，＃901A1C），停止颜色（100％，＃ffffff））;
background：-webkit-linear-gradient（left，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
背景：-o-linear-gradient（left，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
背景：-ms-linear-gradient（left，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃ffffff'，endColorstr ='＃ffffff'，GradientType = 1）;
背景：线性渐变（左，#ffffff 0％，＃901A1C 51％，＃ffffff 100％）;
只用CSS就可以看到这个线性渐变，其中有三个颜色停止点。
04年4月
使建筑物渐变更容易
有两个网站我建议帮助你建立渐变，他们每个人都有优点和缺点，我还没有找到一个渐变的建设者，一切都还没完成。
终极CSS渐变发生器
此渐变生成器非常受欢迎，因为它以类似于Photoshop等程序中的渐变构建器的方式执行。 我也喜欢它，因为它给了你所有的CSS扩展，而不仅仅是Webkit和Mozilla。 这个发生器的问题是它只支持水平和垂直梯度。 如果你想做对角线梯度，你必须去我推荐的另一个发电机。
CSS3渐变发生器
这台发电机让我花了一点时间才比第一台更理解，但它确实支持将方向改为对角线。
如果您知道另一个比这更好的CSS渐变生成器，请告诉我们 。