使用纯 CSS 设计3D按钮

CSS 按钮的效率远比基本图像的按钮的效率高得多，因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且，你不需要任何 JavaScript 来交换图像以实现翻卷效果，因为 CSS 伪类（pseudoclass）能够让你为链接的每个状态（链接<link>、已访问<visited>、悬停<hover>、激活<active>）建立独立的样式。

纯 CSS 按钮唯一的问题是它们看上去相当单调，只有固定的颜色背景和一个简单的边界。一个解决方法是使用混合技术向 CSS 样式的文本按钮加入一个背景图像，从而使其具有3D效果。然而，读者的电子邮件提示我寻找一种使用纯 CSS 创建3D按钮效果的方法——不需要图像。我发现通过控制 CSS 按钮边界的样式有两个方法可以创建斜面边缘的外观效果。 http://www.dw8.org dw专业网站

  http://www.dw8.org Dreamweaver 专业网站

 

创建斜面边缘效果

http://www.dw8.org Dreamweaver 专业网站

  http://www.dw8.org Dreamweaver cs3 专业网站

  http://www.dw8.org Dreamweaver 专业网站

要使一个按钮具有3D斜面边缘效果，需要模拟一个光源，以在一个凸起按钮的边缘创建加亮区和阴影区。如果光源在上面稍微偏向按钮的左边，那么按钮的顶部和左侧就会比按钮表面更亮，而底部和右侧就会比按钮表面更暗。