眾所周知，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來模擬。
具體可查看這里