PIE – Background gradient

background gradient 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 background gradient cho các trình duyệt IE có phiên bản thấp.

PIE: background gradient

background gradient 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 background gradient cho các trình duyệt IE có phiên bản thấp.

Cách sử dụng giống như cách sử dụng PIE cho border-radius, tuy nhiên ta cần sử dụng thêm thư viện pie.htc

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 {
    color:#FFF;
    height:150px;
    width:250px;
    padding:10px;
    background: linear-gradient(to top, #FF0000 0%, #330000 100%);
    background: -moz-linear-gradient(to top, #FF0000 0%, #330000 100%);
    background: -o-linear-gradient(to top, #FF0000 0%, #330000 100%);
    background: -ms-linear-gradient(to top, #FF0000 0%, #330000 100%);
    background: -webkit-linear-gradient(bottom, #FF0000 0%, #330000 100%);
    -pie-background: linear-gradient(bottom, #FF0000 0%, #330000 100%);
    behavior: url(http://hocwebchuan.com/example/js/pie.htc);
}
.piecss3 {
    position: relative;
    z-index: 10;
}
</style>
</head>
<body>
<p class="piecss3">CSS3 background gradient<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 *