三种方法兑现弹出框边框半透明和圆角的效果
发现支付宝的一个充值抽红包的系统里面有个弹出对话框，边框半透明效果，就想着自己做一个弹出对话框效果，
用三种方法实现弹出框边框半透明和圆角的效果
1.用rgba来实现背景半透明，设置内边距
2.设置border颜色半透明，利用background-clip设置；
3.利用滤镜效果，实现空元素背景半透明
border-radius实现圆角效果
源码下载地址：http://download.csdn.net/my
html代码如下：
<div class="main">
<div class="box">
<div class="inner">web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫</div>
</div>
<div class="box1">
<div class="inner">web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫</div>
</div>
<div class="box2">
<div class="inner2">web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫web前端蓝枫</div>
<div class="inner3"></div>
</div>
</div>
css代码如下：
<style type="text/css">
* {
margin:0;
padding:0;
}
.main {
width:900px;
padding:50px 10px;
margin:0 auto;
background:url(images/wood_pattern.jpg);
}
.box {
padding:10px;
background:rgba(0,0,0,0.3);
border-radius:5px;
overflow:hidden;
width:400px;
height:400px;
margin:10px auto;
}
.inner {
height:100%;
width:100%;
background:#fff;
}
.box1 {
border-radius:10px;
border: 10px solid rgba(0,0,0,0.3);
width:400px;
height:400px;
-moz-background-clip:padding;
-webkit-background-clip:padding;
background-clip: padding-box;
margin:10px auto;
background-color:#000;
}
.box2 {
width:400px;
height:400px;
position:relative;
margin:10px auto;
padding:10px;
}
.inner2 {
position:relative;
z-index:2;
background:#ffffff;
height:100%;
}
.inner3 {
height:100%;
position:absolute;
background:#000;
opacity:0.3;
filter:alpha(opacity=30);
left:0;
top:0;
width:100%;
border-radius:5px;
}
</style>
预览效果：