.box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(ie-css3.htc); /* 可以讓IE 6,7,8模擬部分的CSS3屬性 */ }
完整代碼如下：
復(fù)制代碼
代碼如下:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>讓IE支持css3</title> <style> .box-shadow{ width:200px; height:100px; margin-bottom:20px; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/ background-color: #eee; -moz-box-shadow:2px 2px 5px #969696;/*firefox*/ -webkit-box-shadow:2px 2px 5px #969696;/*webkit*/ box-shadow:2px 2px 5px #969696;/*opera或ie9*/ } .box-radius { width:200px; height:100px;margin-bottom:20px; background-color: #eee; border-radius: 15px; behavior: url(http://jt.875.cn/css3/border-radius.htc); } .box { width:200px; height:100px;background-color: #eee;margin-bottom:20px; -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ behavior: url(http://jt.875.cn/css3/ie-css3.htc); /* 可以讓IE 6,7,8模擬部分的CSS3屬性 */ } </style> </head> <body> <div class="box-shadow"></div> <div class="box-radius"></div> <div class="box"></div> </body> </html>
