 pie使css3的属性在ie中正常显示（纯css3圆角兼容ie6） 今天在群里看到gucong说的，写一下笔记。 [成都]gucong(35803719) 15:07:19 PIE给我们带来了CSS3属性在IE中的支持 selectivizr给我们带来了CSS3选择器在IE中的支持 ------------------------------------------------------谢了~哈哈 我先看的pie，所以这篇笔记我记载的pie。 若是没有pie的话，仅仅用css3写得圆角效果，在IE中不兼容。加上pie就可以。 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>pie的使用</title> <style type="text/css"> body{behavior:url("csshover.htc");} .test{ color:#fff; border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -webkit-linear-gradient(#EEFF99, #66EE33); background: -moz-linear-gradient(#EEFF99, #66EE33); background: -ms-linear-gradient(#EEFF99, #66EE33); background: -o-linear-gradient(#EEFF99, #66EE33); background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url("PIE.htc"); } .test:hover{ cursor:pointer; border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #cccccc; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#cccccc), to(#ff0000)); background: -webkit-linear-gradient(#cccccc, #ff0000); background: -moz-linear-gradient(#cccccc, #ff0000); background: -ms-linear-gradient(#cccccc, #ff0000); background: -o-linear-gradient(#cccccc, #ff0000); background: linear-gradient(#cccccc, #ff0000); -pie-background: linear-gradient(#cccccc, #ff0000); behavior: url("PIE.htc");} </head> <body> <div class="test"> 碰触变色 </body> </html> (责任编辑：admin) |