特别感谢 Ryan Doherty 建立了这个演示，并使我能够轻松地将其转化为教程。

在这个演示中，我们将逐步讲解在 Firefox 3.6 中即将推出的新渐变功能（参见相关文章）的简单用例。我们将使用渐变和现有的 CSS 属性构建一个看起来很不错的浮雕和斜面按钮。该按钮是为我们 Personas 网站的下一个版本而开发的。

使用基于 CSS 的方法来生成按钮是网页开发人员的一大进步。这意味着你无需每次更改文本时都重新生成图像，网页加载速度也会快很多，因为你无需下载单独的图像，并且还可以轻松地对文本进行本地化。在这种情况下，它还会从可访问性的角度使网页更出色 - 位于 <a href> 中的文本可以添加上下文。

您可以查看 此演示的最终版本，或者按照此处概述的步骤操作。

创建按钮

按钮只是一块带有链接的矩形空间。我们可以用一小段简单的 HTML 创建它

  
    Get Personas for Firefox
    It's free and installs in seconds
  

这将创建一个段落元素并设置一个固定宽度。内部的“按钮”实际上是一个简单的 <a> 链接，其中包含文本。

在设置了按钮的宽度后，我们需要强制 <a> 充当块级元素，这样内部的文本将作为单个元素的一部分流动，而不是显示为两个不同的部分

display: block;

我们希望选择一些更好的字体和更漂亮的样式

font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 138.5%;

text-align: center;
text-decoration: none;

并添加一些文本周围的填充，并设置圆角

padding: 10px;
-moz-border-radius: 10px;

我们在按钮周围设置了一个边框，并设置了一个背景色作为其他浏览器的回退。（当然，除了 IE。请参见下面的说明。）

border: 1px solid #659635;
background: #99ca28;

我们还希望设置文本的颜色，并添加一个漂亮的阴影，使文本看起来像是浮雕在按钮上的

text-shadow: -1px -1px 2px #777777;
color: #ffffff;

一旦我们有了这些，我们就可以使用 -moz-linear-gradient CSS 属性定义渐变，使其在顶部具有漂亮的斜面外观

background: -moz-linear-gradient(top, #CFE782 0%,
                                      #9BCB2A 2%,
                                      #5DA331 97%,
                                      #659635 100%);

这里的语法非常简单。“top”表示它从区域的顶部开始，一直到按钮的底部。其余的语法定义了所谓的“颜色停止”。这些允许你定义实际上跨越两种以上颜色的渐变过渡。这是在这种情况下的使用，因为斜面效果需要从一种颜色到另一种颜色的非线性过渡。

在上面的语法中，它定义了起始颜色 (0%)、斜面效果 (2%)、大部分过渡 (97%) 和用于结束的边框颜色 (100%)。这会产生一种效果，即它在顶部非常浅，仿佛有一个光源正在移动到靠近底部的更暗的颜色。

IE 说明

简要介绍一下我们亲爱的朋友 Internet Explorer。虽然较旧版本的 Firefox 和 Safari 都可以优雅地处理 background: -moz-linear-gradient，当它们遇到它们不知道如何处理的属性时不会影响背景呈现，但 IE 只显示白色背景。一个可能的解决方法是在一个单独的样式表中为 IE 包含一个后面的 background: 属性，该样式表会在加载此样式表后加载。可能还有其他方法来处理这个问题，但值得注意的是，这是一个问题。