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

  • Internet Explorer6
  • Internet Explorer7
  • Internet Explorer8
  • Internet Explorer9

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="http://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<!--[if lte IE 10]><script src="http://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:

Click để xem demo.

Download file để thực hành

Tham khảo thêm tại: CSS3 PIE

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *