支持IE6,7,8版本的css3圆角资源-CSDN文库

共2个文件

html：1个

htc：1个

可以支持IE版本的css圆角

不采用js

5星 · 超过95%的资源需积分: 9 112 浏览量 2011-11-18 09:58:36 上传评论收藏 3KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

border-radius-demo-1.zip （2个子文件）

border-radius

border-radius.html 2KB

border-radius.htc 5KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body { background-color: #fff; font: normal 11pt Trebuchet MS,Arial,sans-serif; } .box1 { background-color: #f0f0f0; width: 533px; height: 50px; margin: 0 auto 15px auto; padding: 30px; border: 1px solid #d7d7d7; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } .box2 { background: transparent url(ashera.jpg); no-repeat top left; width: 420px; height: 220px; margin: 0 auto 35px auto; padding: 30px; color: #fff; font-weight: bold; border: 11px solid #35b70e; -moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px; behavior: url(border-radius.htc); } .box3 { background-color: #ddd; width: 210px; height: 30px; padding: 20px; position: absolute; top: 5px; left: 5px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; behavior: url(border-radius.htc); } .rel { margin: 50px 0 0 33px; padding: 25px; position: relative; z-index: inherit; zoom: 1; /* For IE6 */ } </style> </head> <body> <h1><a href="http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser" title="">Rounded corner / Curved corner divs using CSS 3 in all browsers</a></h1> <p>Not just divs, but any element*</p> <div class="rel"> <div class="box1"> lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet </div> <div class="box2"> this cat is a hybrid of domestic and wild breeds :) </div> <div class="box3"> this box is absolutely positioned </div> </div> </body> </html>

评论收藏

内容反馈