PIE – Box shadow

Tương tự như border-radius và background-gradient, box-shadow cũng được Pie hỗ trợ dành riêng cho các trình duyệt IE6,7,8.

PIE: border-radius, box-shadow, background gradient

box-shadow 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 box-shadow 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 {
    background-color:#F7F7F7;
    height:150px;
    width:250px;
    margin:10px;
    padding:10px;
    -webkit-box-shadow: #CCC 0 0 10px;
    -moz-box-shadow: #CCC 0 0 10px;
    box-shadow: #CCC 0 0 10px;
    behavior: url(http://hocwebchuan.com/example/js/pie.htc);
}
.piecss3 {
    position: relative;
    z-index: 10;
}
</style>
</head>
<body>
<p class="piecss3">CSS3 box-shadow<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 *