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