相关文章
顶级网页配色教程(连载4)网页配色与网页布...
网站制作精通 CSS 滤镜（二）
北京网站设计引入CSS样式的五种方式
北京网站设计CSS样式表设计的十条技巧
网站设计HTML编写小经验
北京网站建设制作信息分类区与页脚
网站设计Dreamweaver MX 2004 打造细线表格（1）
网页设计Flash视频教程：1.5 椭圆工具
网站设计Dreamweaver的行为事件
网站设计FrontPage10全透视教程(14)
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作北京网站设计使用纯 CSS 设计3D按钮
网站制作北京网站设计使用纯 CSS 设计3D按钮
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
CSS 按钮的效率远比基本图像的按钮的效率高得多，因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且，你不需要任何 JavaScript 来交换图像以实现翻卷效果，因为 CSS 伪类（pseudoclass 北京网站设计）能够让你为链接的每个状态（链接<link>、已访问<visited>、悬停<hover>、激活<active>）建立独立的样式。
纯 CSS 按钮唯一的问题是它们看上去相当单调，只有固定的颜色背景和一个简单的边界。一个解决方法是使用混合技术向 CSS 样式的文本按钮加入一个背景图像，从而使其具有3D效果。然而，读者的电子邮件提示我寻找一种使用纯 北京网页设计 CSS 创建3D按钮效果的方法——不需要图像。我发现通过控制 CSS 按钮边界的样式有两个方法可以创建斜面边缘的外观效果。
创建斜面边缘效果
要使一个按钮具有3D斜面边缘效果，需要模拟一个光源，以在一个凸起按钮的边缘创建加亮区和阴影区。如果光源在上面稍微偏向按钮的左边，那么按钮的顶部和左侧就会比按钮表面更亮，而底部和右侧就会比按钮表面更暗。