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
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 { 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(https://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:
Tham khảo thêm tại: CSS3 PIE