面试中经常会遇到的问题，索性写个总结，方便以后参考：
没有最好的方法，只有更好的方法，毕竟：代码改变世界！
第一种：简单粗暴PNG圆角图片，即css调用一张圆角图，覆盖到图上
缺点：适用范围受限，不易优化
第二种：用js强制修边，js调用图片遮盖边角（如有需要请自行百度）
第三种：纯CSS绘制，实例如下：
原贴出处：http://www.zhangxinxu.com/wordpress/2016/07/ie7-ie8-css-circle-border-radius/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IE7/IE8浏览器纯CSS实现圆角效果实例</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ width: 150px; height: 150px; position: relative; background: orange; /* 值显示左上角那个圆点 */ overflow: hidden; } .radius{ position: absolute; width: 100%; height: 100%; border-radius: 50%; border:149px dotted; /* IE7,IE8圆尺寸要小1像素同时有1像素偏移 */ margin: 0 0 1px 1px; /* vw 如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100*/ border-width: 0vw; /*相对于视口的宽度。视口被均分为100单位的vw*/ margin: 0vw; background-color: pink; } .text { padding-top: 20px; position: relative; color: #000; text-align: center; font-size: 24px; } </style> </head> <body> <div class="box"> <i class="radius"></i> <p class="text">绘制圆角效果</p> </div> </body> </html>
第四种：引入PIE，点击此处进入下载页面
参考链接：http://blog.csdn.net/m0_37400258/article/details/55520351
下载PIE-2.0版本，里面会有一个PIE.htc,还有一个PIE_IE678.js(主要用的这两个文件)，统一放在同一目录文件夹下，实例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ position: relative; z-index: 0; } .yuan{ width:100px; height:100px; background-color:orange; border:1px solid #000; -webkit-border-radius:20px; -moz-border-radius:20px; -ms-border-radius:20px; -o-border-radius:20px; border-radius:20px; behavior: url(PIE.htc); } </style> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="PIE_IE678.js"></script> <script type='text/javascript'> $(function() { if (window.PIE) { $('.yuan').each(function() { PIE.attach(this); }); } }); </script> <![endif]--> </head> <body> <div class="box"> <div class="yuan"></div> </div> </body> </html>
※注：以上代码均由本人亲测，如有纰漏，不吝指出。
第五种：拖字诀，说服领导放弃兼容~
个别注意点：
1、html,htc,js文件均放在同一文件夹中，如有需要自行调整位置
2、iecss3的方法未实现该属性兼容，或许使用方式不对，有兴趣的可以自行研究下，有了结果欢迎留言链接。
3、没有最好的方法，只有更好的方法~END