2006-12-31 11:41:11

使用纯 CSS 设计3D按钮

来源: 字体:[大中小]

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

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

创建斜面边缘效果

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

· 北京站长江苏站长浙江站长

· 江西站长安徽站长山西站长

· 山东站长河北站长辽宁站长

· 吉林站长黑龙江站长重庆站长

· 上海站长天津站长河南站长

· 海南站长福建站长湖北站长

· 广东站长新疆西藏宁夏站长

· 青海站长甘肃站长云南站长

· 贵州站长四川站长陕西站长

· 广西站长湖南站长内蒙古站长

网站地图　- 域名注册续费虚拟主机代理　- 交易论坛　- 网站投稿　- 广告服务　- 帮助中心　- 联系我们