众所周知，IE7，8不支持border-radius效果。但我们同样有办法用css实现这个效果，方法就是用border来模拟。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ position: relative; width: 150px; height: 150px; line-height: 150px; overflow: hidden; } .radius{ position: absolute; width: 100%; height: 100%; margin: 0 0 1px 1px; /*现代浏览器就使用border-radius*/ border-radius: 50%; /*IE7,8就使用border来模拟*/ border: 149px dotted; border-width: 0vw; margin: 0vw; color: #cd0000; background-color: currentColor; } .text{ position: relative; text-align: center; color: #fff; font-size: 24px; margin: 0; } </style> </head> <body> <div> <p class="radius"></p> <p class="text">kobe</p> </div> </body> </html>
vw单位可能大家用的比较少，因为这个单位是IE9+才支持，所以现代浏览器直接把边框设为0vw，就表示无边框，直接使用border-radius，而IE7,8则使用border来模拟。
具体可查看这里