【IT168 技术】CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。利用层叠样式表 (CSS)，级别 3 (CSS3) 和 Internet Explorer 9，只需少量几个标记，您就可以创建外观非常吸引人的按钮。 本主题演示如何完全利用 层叠样式表 (CSS) 将简单的超链接转换为时髦的按钮。
本主题包括以下 CSS3 功能：
1、使用 border-radius 属性的圆角
2、使用 box-shadow 属性的阴影
3、RGBA 颜色值
本主题还包括首次在 Windows Internet Explorer 8 中引入的以下功能：
1、数据 统一资源标识符 (URI)
2、透明 可移植网络图形 (PNG)
起点
在本主题中，我们使用如何使用 CSS3 添加圆角框中的同一咖啡公司示例。 我们会将棕色订单信息水平栏中每个产品描述后的“Order Now!”超链接变成一个按钮。 该订单信息栏当前如下所示： 
此规则由以下类选择器定义：
.product_orderinfo {
text-align: right;
display: block;
padding: 5px;
font-size: 11px;
font-weight: bold;
color: white;
background-color: #996633;
}
text-align: right;
display: block;
padding: 5px;
font-size: 11px;
font-weight: bold;
color: white;
background-color: #996633;
}
首先，让我们将“Order Now!”超链接变成一个基本的矩形按钮。 为了很好地与其他设计部分进行对比，让我们将此按钮设为蓝色。 我们还将增加订单信息栏的高度，以便容纳更大的按钮。 基本按钮的 CSS 如下所示。 (已声明此选择器，以便具有 product_orderinfo 类的元素中的任何 a 元素都会应用所列的声明。 这将确保此选择器只应用于订单信息栏中的“Order Now!”按钮。)
.product_orderinfo a {
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none
font-weight: bold;
margin: 3px;
background: #000099;
}
color: white;
display: inline-block;
padding: 5px 10px;
text-decoration: none
font-weight: bold;
margin: 3px;
background: #000099;
}
