您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 网页设计 >> 正文

CSS3技术制作水晶按钮,不支持IE

作者:佚名    责任编辑:admin    更新时间:2022-06-22

class="area">

使用Css3里的border-radius属性来实现一个水晶按钮的制作。支持firefox, chrome, safari,但是IE依然不支持哦,强烈建议大家尽早摆脱IE魔掌。

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. 效果如下: