View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> *{margin:0; padding:0;} /*圆角、阴影、透明度*/ .box { margin-left:50px; margin-top:50px; width:300px; height:300px; background:#eee; /*下面是圆角*/ -moz-border-radius: 12px; /* Firefox */ -webkit-border-radius: 12px; /* Safari and Chrome */ border-radius: 12px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ /*下面是阴影*/ /*box-shadow参数对应[x偏移,y偏移,模糊度,阴影颜色][x与y偏移可取负值]IE不支持负值*/ -moz-box-shadow: 3px 3px 3px #000; /* Firefox */ -webkit-box-shadow: 3px 3px 3px #000; /* Safari and Chrome */ box-shadow: 3px 3px 3px #000;/* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ /*ie圆角与阴影需要此文件*/ /*下面可以兼容ie文件,需在服务器上才能执行*/ behavior: url(http://iz100.com/ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ } </style> </head> <body> <div class="box"></div> </body> </html>
效果图:
