主要使用CSS3里的border-radius，在firefox, chrome, safari都能看到效果哦（无视IE系列吧。。。）
来源及更多应用请参考《无懈可击的Web设计2--CSS深入应用》
1. 先制作一张背景图片，height:100px, width:2px, 上半部填充白色，透明度为20%; 下半部分完全透明，效果如下：
2. Html
< div class ="divBtn" >< a href ="#" > Click Me </ a ></ div >
3. CSS:
.divBtn a { background : #3792b3 url(btn-glass.png) repeat-x 0 50%; border : 1px solid #3792b3 ; color : #fff ; font-size : 12px ; padding : 6px 20px ; text-decoration : none ; /*这3句是重点啊~~~*/ border-radius : 14px; -webkit-border-radius: 14px; -moz-border-radius: 14px; }
4. 效果如下：（IE下看到的是直角哦~看不到圆角的童鞋赶紧换浏览器吧！）
Click Me
只要改变背景颜色就能看到看到不同效果啦（以下是截图）~~~
转载于:https://www.cnblogs.com/21gram/archive/2010/12/16/1908641.html
相关资源：立体水晶按钮，CrystalButton3D