div模拟边框半透明效果.docVIP

div模拟边框半透明效果 要达到半透明效果首先必须要知道怎么去设置半透明的属性，然而不同的浏览器也会有不同的要求。在IE下用的是过滤镜：filter属性，在firefox（火狐）下用的是opacity属性。 filter:alpha(opacity=50)；这个是IE中的半透明取值属性（取值1-100）； -moz-opacity:0.5;老版本的mozilla浏览器中的属性； -khtml-opacity:0.5；支持老版本的safari浏览器 opacity:0.5;css的标准 支持firefox、safari和opera 以下是一个半透明效果的事例： 实现思路是用两个层来达到这种效果。 第一个是底部的层（设置为半透明效果），第二个是要显示内容的层。两个层通过position:absolute;定位后设置left:8px;top:8px;便可以达到半透明边框为8px的效果。 这种方法肯定是有缺陷的，就是他们的高度和宽度必须给定。然而是动态页面的话你可以通过js脚本语言来控制。 !DOCTYPE HTML PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html head title半透明效果/title !--absolute link rel=stylesheet type=text/css href=styles.css -- style p{color:red;} .out_div{ width:516px; height: 356px; position:relative; margin: 0px auto ; background:#D4E7F4; } #di{background:#808080; filter:alpha(opacity=30); opacity:0.4; width:476px; height: 316px; position:absolute; left:20px;top:20px; } #wrap{ background: green; width: 460px; height: 300px; left:28px; top:28px; position:absolute; } /style /head body class=bodys div class=out_div paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p paaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/p div id=di/div div id=wrap/div /div p/p /body /html