對於下圖的透明視覺邊框：
你可以使用3層DIV進行設置：1.底部背景（圖片層） 2.中間透明層 3.上部內容層
原理：通過 z-index 對三層div 三維空間定位，結合absolute將2、3層死死固定在背景上面。實際上第2層是個假邊框，他是個透明背景的div（使用background：rgba（）； ） 它將第三層包含就會出現透明效果。
現在，採用CSS3的技能。
貼代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div{
background: url("1.jpg");
height: 300px;
width: 500px;
padding: 0 auto;
margin: 50px auto; }
#div1{
width: 180px;
height: 180px;
background:white;
margin: 0 auto;
border:10px solid hsla(0,0%,100%,.5);
background-clip: content-box;
}
</style>
</head>
<body>
<div id="div">
背景
<div id="div1">內容//supercun.cn //內容</div>
</div>
</body>
</html>
最後
這裏用到hsla的顏色取值法，與rgba（）原理類似，不再贅述。
background-clip的初值是border-box，背景元素將會被元素的border box（邊框的外緣框）切掉。//注意：這裏的背景指內容背景
爲了方便對比，我們把顏色設爲藍色。background-clip：border-box；
如果要防止背景侵入邊框，只需要將值設爲background-clip：padding-box；
