PIE – radius
Đối với một số trình duyệt IE6,7,8. Chúng ta không thể sử dụng thuộc tính border-radius như những trình duyệt khác, mà phải sử dụng plugin thay thế, ở đây ta dùng PIE.
PIE: border-radius
border-radius là một thuộc tính của CSS3, thuộc tính này không được hỗ trợ trong các trình duyệt IE6,7,8.
Sử dụng PIE, ta có thể tạo border-radius cho các trình duyệt IE có phiên bản thấp.
Trình duyệt
6- 7
- 8
- 9
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <!--[if lte IE 10]><script src="https://hocwebchuan.com/example/js/pie.js" type="text/javascript"></script><![endif]--> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } p { height:50px; width:150px; padding:10px; border:1px solid #333; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; } .piecss3 { position: relative; z-index: 10; } </style> </head> <body> <p class="piecss3">CSS3 border-radius<br /> PIE - IE6,7,8,9</p> </body> </html>
Hiển thị trình duyệt:
Tham khảo thêm tại: CSS3 PIE