使用CSS3制作水晶按钮
时间:2010-12-16 来源:21克木子
来源及更多应用请参考《无懈可击的Web设计2--CSS深入应用》
1. 先制作一张背景图片, 下半部分完全透明,效果如下:
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
只要改变背景颜色就能看到看到不同效果啦(以下是截图)~~~
相关阅读 更多 +
排行榜 更多 +