作者： Builder.com
2005-01-12 09:52 AM
CSS 按钮的效率远比基本图像的按钮的效率高得多，因为它们全部都是基于文本的。所有要用 XHTML 标记只是一个无序列表——CSS 样式负责其余部分。而且，你不需要任何 JavaScript 来交换图像以实现翻卷效果，因为 CSS 伪类（pseudoclass）能够让你为链接的每个状态（链接
、已访问
、悬停、激活）建立独立的样式。
纯 CSS 按钮唯一的问题是它们看上去相当单调，只有固定的颜 {MOD}背景和一个简单的边界。一个解决方法是使用混合技术向 CSS 样式的文本按钮加入一个背景图像，从而使其具有3D效果。然而，读者的电子邮件提示我寻找一种使用纯 CSS 创建3D按钮效果的方法——不需要图像。我发现通过控制 CSS 按钮边界的样式有两个方法可以创建斜面边缘的外观效果。
创建斜面边缘效果
要使一个按钮具有3D斜面边缘效果，需要模拟一个光源，以在一个凸起按钮的边缘创建加亮区和阴影区。如果光源在上面稍微偏向按钮的左边，那么按钮的顶部和左侧就会比按钮表面更亮，而底部和右侧就会比按钮表面更暗。
所以，创建三维效果的秘密是使用 CSS 边界模拟按钮的侧面，并为每个边界的使用稍微不同的颜 {MOD}，具体的颜 {MOD}方案要根据它所表示的是光亮的一侧还是阴暗的一侧而定。为了看上去更加真实，边界应该具有斜接角，CSS 边界能够很好地满足这一需要。
方法1：使用inset/outset（嵌入线/浮出线）边界
有一个 CSS 边界属性能够自动产生合理的斜面边缘模拟效果。你只须为按钮样式的 border-style 属性指定为 inset 或者 outset即可。浏览器会以稍微不同的背景 {MOD}阴影来处理元素边界的表现细节，从而得到期望的效果。outset属性模拟凸起按钮的阴影边缘，inset 属性通过反转阴影来模拟按钮被按下的情景。
图 A 展示了实际的 inset/outset 边界效果。这个例子是由一些非常简单的代码产生的。XHTML 非常简单，只包含一些按钮标签（label）和链接。
CSS 样式使这种方法与设计普通的平面按钮的样式非常相似。唯一多出来的地方是这里将 border-style: outset和 border-style: inset规则同 border-width设置组合使用，后者将边界宽度设置的足够大以使其可见。
body {
margin: 0px;
padding: 0px;
}
div#buttonA {
margin-left: 50px;
}
div#buttonAul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonAli {
list-style-type: none;
height: 30px;
width: 125px;
margin: 20px;
text-align:center;
}
div#buttonAli a {
height: 100%;
width: 100%;
display: block;
text-decoration: none;
border-width: 6px;
}
div#buttonAlia:link {
color: #000000;
font-weight: bold;
background-color: #CCCCCC;
border-style: outset;
}
div#buttonAlia:visited {
color: #000000;
font-weight: normal;
background-color: #CCCCCC;
border-style: outset;
}
div#buttonAlia:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #999999;
border-style: outset;
}
div#buttonAlia:active {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-style: inset;
}
在前面的文章中我已经讲到过创建 CSS 按钮的方法，所以我将只挑要点部分解释。
div#buttonAul规则设置常规文本的尺寸和间距，div#buttonAli规则去除列表项的默认项目符号（list-style-type: none）并设置按钮框的尺寸。div#buttonAli a规则使整个按钮可点击（height: 100%; width: 100%; display: block;），它还是设置边界宽度的一个很方便的地方。
样式的其余部分控制不同按钮状态的外观变化。所有伪类（:link、:visited、:hover、:active）都有一个 color、font-weight、background-color 和 border-style 规则。除div#buttonAlia:active规则之外，所有样式都使用 border-style: outset规则，div#buttonAlia:active使用 border-style:inset规则。这样就使按钮状态有一个凸起的外观——当然要将按钮被点击时的情况除外，在按钮被点击时它呈现被按下的状态。
不同的浏览器呈现 inset 和 outset 边界的方式有很大的不同。Internet Explorer 创建更加精细的效果，在每个边界的内边缘有一个加亮区，在外边缘有一个阴影区。而另一方面，Netscape 则以固定的颜 {MOD}呈现每个边界，这样就产生一个比较有突边的，不怎么圆滑的外观效果。
方法2：控制单个侧面
使用 inset/outset 边界样式是模拟3D效果的一种简单快捷的方法。然而，这不是唯一的方法。如果你不喜欢标准的效果，或者你为浏览器在表现方式上的差别而困扰，那么你可以自己控制边界的颜 {MOD}来产生你想要的效果。
除了使用能border-style 的 inset/outset 属性以及让浏览器处理每个边界的实际颜 {MOD}之外，你还可以使用自己的样式规则为每个边界单独设置颜 {MOD}。
Figure B shows the results of using a style sheet that specifies the colors of each button side individually. The markup is the same as in Figure A. Here's the CSS code:
图 B展示了使用这种方法得出的3D按钮效果，这里样式表单独指定每个按钮侧面的颜 {MOD}。图 B 所用标记与图 A 中的一样，下面是 CSS 代码：
body {
margin: 0px;
padding: 0px;
}
div#buttonA {
margin-left: 50px;
}
div#buttonAul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonAli {
list-style-type: none;
height: 30px;
width: 125px;
margin: 10px;
text-align:center;
}
div#buttonAli a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:link {
color: #000000;
font-weight: bold;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:visited {
color: #000000;
font-weight: normal;
background-color: #999999;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #777777;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #BBBBBB;
border-top-color: #DDDDDD;
}
div#buttonAlia:active {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
border-style: solid;
border-top-color: #333333;
border-left-color: #555555;
border-right-color: #BBBBBB;
border-bottom-color: #DDDDDD;
}
尽管这块代码明显要比前一个例子中的 CSS 代码要长，但并不是两者间的主要区别。它们的主要区别在于这里使用了一个 border-style: solid规则替换了原来的 border-style: outset (或 border-style: inset) 规则，后接几个规则单独设置每个边界的颜 {MOD}（border-top-color: #DDDDDD等）。
使用这一方法，你可以完全控制按钮侧面的颜 {MOD}。也就是说完全由你决定选择合适的颜 {MOD}来获得你所要的效果——而且，你还要记住交换颜 {MOD}以使按钮在处于 :active 状态时产生被按下的效果。控制这些细节的优点是你可以设置独立的侧面和顶部加亮区的颜 {MOD}，而且最后的结果在所有浏览器表现更加一致。
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.xiaopingtou.cn//data/attach/topic/topicKPo7gB.jpg', '推荐 oyhprince 的文章《入门--使用纯 CSS 设计3D按钮》','https://www.xiaopingtou.net/article-54922.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}