仿微博半透明边框
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
body {
background:blue;
}
#box {
width:300px;
padding:5px;
position:relative;
}
#alpha_bg {
background:#f2f2f2;
width:100%;
height:100%;
opacity:0.3;
position:absolute;
top:0;
left:0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#content {
border:1px solid #bbb;
background:#fff;
padding:10px;
}
</style>
</head>
<body>
<div id="box">
<div id="alpha_bg"></div>
<div id="content">内容区</div>
</div>
</body>
</html>
我的思路是这样的，#box先相对定位，以便#alpha_bg可以绝对定位，但你会发现 ，这样做有个问题，好像整个box都无法选择文本了。
原因就是#alpha_bg位于#content之上，至于为什么跑到它上面去了，我也不甚清楚，希望高人指点一二。
解决办法很简单，既然是层级问题，自然用到z-index，但这个属性有个前提，目标元素必须设置了position: relative/absolute/fixed三者之一，即不能是默认值就行。
最终版
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
body {
background:blue;
}
#box {
width:300px;
padding:5px;
position:relative;
}
#alpha_bg {
background:#f2f2f2;
width:100%;
height:100%;
opacity:0.3;
position:absolute;
top:0;
left:0;
z-index:0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#content {
border:1px solid #bbb;
background:#fff;
padding:10px;
position:relative;
z-index:2;
}
</style>
</head>
<body>
<div id="box">
<div id="alpha_bg"></div>
<div id="content">内容区</div>
</div>
</body>
</html>
这只是一种方式，还有一种是div外套一层div，外层div设置半透明圆角背景，再给个padding就哦了
