这将使此按钮如下所示：
可以查看修订过的页面。 还可以下载它的 CSS 文件。
这看起来还行，但阴影没有融入背景色中。 这将导致沿按钮右边框和底边框会产生浅灰色带。 我们可以利用 Internet Explorer 9 的另一个新功能来避免这种情况： RGBA 颜色值。 RGB (red-green-blue) 颜色值是一种用于指定浏览器中的颜色的标准方法。 RGBA (red-green-blue-alpha) 值是相同的，但增加了“alpha”通道(即，透明度)。
我们可以将灰色值替换为一个 RGBA 颜色值，该 RGBA 色值可使阴影变成 50% 透明度的黑色。 这就使阴影能够融入背景色中。 添加 RGBA 颜色值后，选择器的此部分现在如下所示：
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
这将使按钮如下所示。 现在阴影完美地融入了背景色中：
可以单击此处查看修订过的页面。 还可以下载它的 CSS 文件。
添加透明渐变叠加
最后，我们将添加透明渐变叠加，这样能为按钮表面提供一些纹理。 对此按钮的整个长度方向上重复相同的 1 个像素宽的透明垂直渐变可达到此目的，而不会对带宽造成大的影响。 您可以在常用图像编辑器中创建渐变，或直接使用链接到此处的渐变： gradient.png。
若要将渐变应用到此按钮，请将对渐变位置的引用作为 url() 值添加到 background 属性，并将其设置为使用 repeat-x 值沿水平方向重复此操作，如下面所示：
这将使此按钮如下所示：
为了确保当光标悬停在此按钮上时会有相同的效果，我们将需要通过类似方式更新以下选择器：
background: #663300 url("gradient.png") repeat-x;
}
可以查看修订过的页面。 还可以下载它的 CSS 文件。
作为数据URI 添加透明渐变叠加
数据 URI 是首先在 Internet Explorer 8 中获得支持的，它提供了在网页中以内联方式嵌入数据项的能力。 数据 URI 最常见的一个用途是将小图像嵌入网页中。 我们可以通过上一节中所述的透明渐变叠加轻易完成此操作。
第一步是将 PNG 图像转换为 数据 URI。 有很多基于 Web 的解决方案和桌面应用程序可以帮助您完成此操作。 大多数这类方法都需要将图像文件上载到应用程序或者为应用程序指定图像文件，然后由应用程序为您提供要使用的 数据 URI。 文件“gradient.png”的 数据 URI 如下所示：
