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