01

03年的

使用css3创建跨浏览器线性渐变

上图显示了从左到右的#999（深灰色）到#fff（白色）的简单渐变。

线性渐变最容易定义，在浏览器中也最受支持。Android 2.3+、Chrome 1+、Firefox 3.6+、Opera 11.1+和Safari 4+支持CSS3线性渐变。

定义渐变时，请确定其类型“线性”或“径向”，以及渐变应该停止和开始的位置。添加渐变的颜色以及这些颜色各自的开始和结束位置。

要使用CSS3定义线性渐变，请编写：

linear-gradient(angle or side or corner, color stop, color stop)

首先用名称定义渐变的类型

然后，使用以下两种方法之一定义渐变的起点和终点：直线的角度（以度为单位）从0到359，0度指向正上方。或具有“侧边或角边”功能。如果不考虑这些，渐变将从元素的顶部流向底部。

然后定义颜色停止。使用颜色代码和可选百分比定义颜色停止。百分比告诉浏览器在该行上以该颜色开始或结束的位置。默认设置是沿直线均匀放置颜色。您将在第3页了解有关颜色停止的更多信息。

因此，要使用CSS3定义上述梯度，您可以编写：

linear-gradient(left, #999999 0%, #ffffff 100%);

并将其设置为DIV写入的背景：

div {背景图像：线性梯度（左，#999999 0%，#ffffff 100%；}

css3线性渐变的浏览器扩展

要使渐变在跨浏览器中工作，您需要为大多数浏览器使用浏览器扩展，并为Internet Explorer 9及更低版本使用一个过滤器（实际上是两个过滤器）。所有这些都使用相同的元素来定义渐变（除了在IE中只能定义双色渐变）。

Microsoft筛选器和扩展Internet Explorer是最难支持的，因为您需要三个不同的行来支持不同的浏览器版本。要获得上面的灰色到白色渐变，您可以写：

/* IE 5.5–7 */过滤器：progid:dximagetransform.microsoft.gradient（startcolorstr='#999999'，endcolorstr='#ffffff'，gradienttype=1）；/*ie 8-9*/-ms过滤器：“progid:dximagetransform.microsoft.gradient（startcolorstr='#999999'，endcolorstr='#ffffffff'，gradienttype=1）”；/*ie 10*/-ms线性梯度（左，#999999 0%，#ffffff 100%）；

Mozilla扩展-moz-Extension的工作原理与CSS3属性类似，只是使用了扩展。要获得Firefox的上述渐变，请编写：

-moz-linear-gradient(left, #999999 0%, #ffffff 100%);

Opera扩展-o扩展为Opera11.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扩展，可以与Chrome2+和Safari4+一起使用。在其中，可以将渐变类型定义为值，而不是特性名称。要使用此扩展获取从灰色到白色的渐变，请编写：

-webkit-gradient(linear, left top, right top, color-stop(0%,#999999), color-stop(100%,#ffffff));

完整的css3线性梯度css代码

要完全支持跨浏览器，以获得上面的灰色到白色渐变，您应该首先为不支持渐变的浏览器包括一个回退纯色，最后一项应该是完全兼容的浏览器的CSS3样式。所以，你写：

background: #999999;背景：-moz线性梯度（左，#999999 0%，#ffffff 100%）；背景：-webkit渐变（线性、左上、右上、颜色停止（0%，#999999）、颜色停止（100%，#ffffff））；背景：-webkit线性梯度（左，#999999 0%，#ffffff 100%）；背景：-o-线性梯度（左，#999999 0%，#ffffff 100%）；背景：-ms线性梯度（左，#999999 0%，#ffffff 100%）；过滤器：progid:dximagetransform.microsoft.gradient（startcolorstr='#999999'，endcolorstr='#ffffff'，gradienttype=1）；-ms-filter:progid:dximagetransform.microsoft.gradient（startcolorstr='#999999'，endcolorstr='#ffffffff'，gradienttype=1）；背景：线性梯度（左，#999999 0%，#ffffff 100%）；

02

03年的

创建对角线渐变-渐变的角度

起点和终点确定渐变的角度。大多数线性渐变是从上到下或从左到右。但是可以建立一个沿对角线移动的梯度。此页面上的图像显示了一个简单的渐变，从右向左在图像上以45度角移动。

定义渐变线的角度

角度是元素中心假想圆上的一条线。向上0度、向右90度、向下180度和向左270度的测量值。使用任何角度测量。

在正方形中，45度角从左上角移动到右下角，但在矩形中，起点和终点稍微超出形状。

更常见的定义对角线渐变的方法是定义一个角，例如右上角，渐变从该角移动到另一个角。使用以下关键字定义起始位置：

• 顶部
• 正确的
• 底部
• 左边
• 居中

它们可以结合起来更加具体，例如：

• 右上角
• 左上角
• 上中锋
• 右下角
• 左下角
• 底部中心
• 右中
• 左中

这是一个类似于图中的渐变的CSS，从右上角到左下角从红色到白色移动：

background: ##901A1C;背景图像：-moz线性渐变（右上，#901a1c 0%，#ffffff 100%）；背景图像：-webkit渐变（线性、右上、左下、颜色停止（0，#901a1c）、颜色停止（1，#ffffff））；背景：-webkit线性梯度（右上，#901a1c 0%，#ffffff 100%）；背景：-o-线性梯度（右上，#901a1c 0%，#ffffff 100%）；背景：-ms线性梯度（右上，#901a1c 0%，#ffffff 100%）；背景：线性梯度（右上，#901a1c 0%，#ffffff 100%）；

您可能已经注意到，在这个示例中没有IE过滤器。这是因为IE只允许两种类型的过滤器：从上到下（默认）和从左到右（GradientType=1开关）。

03

03年的

色块

使用CSS3线性渐变，在渐变中添加多种颜色，以创建更奇特的效果。要添加这些颜色，请在属性末尾插入其他颜色，并用逗号分隔。你应该在线条上包括颜色的起始或结束位置。

Internet Explorer过滤器仅支持两种颜色停止，因此在构建此渐变时，应仅包括要显示的第一种和第二种颜色。

以下是上述三种颜色渐变的CSS：

background: #ffffff;背景：-moz线性梯度（左，#ffffff 0%，#901a1c 51%，#ffffff 100%）；背景：-webkit渐变（线性、左上、右上、颜色停止（0%，#ffffff）、颜色停止（51%，#901a1c）、颜色停止（100%，#ffffff））；背景：-webkit线性梯度（左，#ffffff 0%，#901a1c 51%，#ffffff 100%）；背景：-o-线性梯度（左，#ffffff 0%，#901a1c 51%，#ffffff 100%）；背景：-ms线性梯度（左，#ffffff 0%，#901a1c 51%，#ffffff 100%）；过滤器：progid:dximagetransform.microsoft.gradient（startcolorstr='#ffffff'，endcolorstr='#ffffff'，gradienttype=1）；背景：线性梯度（左，#ffffff 0%，#901a1c 51%，#ffffff 100%）；

看到这个线性渐变，三个颜色停止只使用CSS。