css兑现shadow窗口
日期：2014-05-17 浏览次数：20681 次
css实现shadow窗口
?
/*关键点： 1 半透明的兼容写法：opacity:0.5,filter:alpha(opacity:50); 2 z-index:要想z-index起作用必须给dom元素添加position:absolute; 3 窗口遮挡效果的实现：shadow的div添加：display="display" 不是disabled */
?
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>shadow窗口</title> <style> .shadow{ opacity:0.5 !important;/*关键*/ padding:0px; margin:0px; position:absolute;/*关键*/ top:0px; left:0px; z-index:100;/*关键*/ width:100%; height:100%; background:gray;/*关键*/ filter:alpha(opacity:50);/*关键*/ } </style> </head> <body style="border:1px solid red;padding:0px;margin:0px;"> <div class="shadow" readonly="readonly"></div> <input type="button" value="alert('aaaaaaaaaaa')" onclick="alert('aaaaaaaaaaa')"> <div style="z-index:20000;position:absolute;top:20%;left:30%;"> <input type="button" value="alert('bbbbbbbbbbbbbb')" onclick="alert('bbbbbbbbbbbbbb')"> </div> </body> </html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
