若要在此按钮上使用 数据 URI，只需将 background 属性值中的文件名 ("gradient.png") 替换为 数据 URI 即可。 background 属性现在如下所示：
background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
我们还可以更新用于定义此按钮在光标悬停在它上面时的行为的选择器，如下所示：
.product_orderinfo a:hover {
background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}
background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}
此按钮将如此处所示，与上一个图像相同。 此按钮最大的优点是，它不需要向您的 Web 服务器上载单独的图像文件：
当光标悬停在此按钮上时，此按钮将如此处所示：
可以查看修订过的页面。 还可以下载它的 CSS 文件。
汇总
现在您已了解到如何向简单的超链接添加圆角、透明阴影和透明渐变叠加以将它变成时髦的按钮。 完成前面几节中描述的所有更改之后，最终的选择器将按如下方式显示在样式表中：
.product_orderinfo a {
color: white;
background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
margin: 3px;
}
.product_orderinfo a:hover {
background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}
color: white;
background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
display: inline-block;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
margin: 3px;
}
.product_orderinfo a:hover {
background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}
