Question

之前，我们主要学习了各种CSS3特性的一般用法。下面我们将组合这些特性来制作THESE SHOULD HAVE WON>>这个超链接的效果。在AND THE WINNER ISN’T网站的原始设计图中，该链接按钮的文字使用的是自定义字体，这点我们已经在第5章处理过。除此之外，该链接按钮还有一个红色的渐变背景，使用了圆角效果并有一点阴影。该超链接目前的样式如下：

首先，针对老版本浏览器为其添加一个背景颜色。这样就算浏览器无法渲染渐变，它至少也可以有一个红色的背景。此处我会刻意使用十六进制颜色值，因为如果老版本浏览器不识别渐变的话，那它也不可能支持RGB和HSL颜色模式：

接下来添加圆角效果。此处及后续章节中都请注意，我在代码示例中添加的所有CSS3属性，一般都需要设定浏览器私有前缀，为简洁起见我在此处省略了前缀：

截至目前我们做出的效果如下：

接下来，将文字颜色改为白色（再强调一次，我想确保在老版本浏览器中也看到同样效果，所以此处使用了简单但兼容的颜色定义），然后设置一定的内边距（也可以使用百分比值）以便让文字四边都有一定的间距：

至此效果如下：

此时，添加内边距导致链接上方的文字被盖住了，所以我们给其追加一个float： left，同时设置背景渐变：

现在看起来有点模样了：

之后再追加一点上边距，设置一下阴影效果：

再在浏览器中查看一下，效果已经差不多了：

接下来，我要添加一点文字阴影和一个很细的白边，虽然原始设计文件没有这些效果，但加上之后会带来些许浮雕效果。这就是使用CSS3的美妙之处——不用图片，能在工作中轻松快速地做出适当调整。

现在我们的按钮在Firefox 8中的效果如下：

还有最后一个问题，原始设计图中的那两个尖括号（即HTML中的＆raquo；）使用了与按钮文字不一样的字体。但在此处为这么一个特殊符号专门引入一种字体不太划算，所以我准备将这个符号用一个内联标签包裹起来，然后增大它的字号。修改后的标签代码如下：

用来修正字体大小的对应CSS代码如下：

最后完成的效果还是很不错的：

使用CSS3替代图片来实现这种效果，最赞的地方在于，可以在超链接中包含任何内容，而它的效果依然保持完美：