PIE – tổng hợp
PIE tổng hợp, viết kết hợp cho cả 3 dạng: border-radius, background-gradient, box-shadow.
PIE: border-radius, box-shadow, background gradient
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 { height:100px; width:150px; margin:10px; padding:10px; border:1px solid #999; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; background: linear-gradient(to top, #0BDFD8 0%, #FFFFFF 100%); background: -moz-linear-gradient(to top, #0BDFD8 0%, #FFFFFF 100%); background: -o-linear-gradient(to top, #0BDFD8 0%, #FFFFFF 100%); background: -ms-linear-gradient(to top, #0BDFD8 0%, #FFFFFF 100%); background: -webkit-linear-gradient(bottom, #0BDFD8 0%, #FFFFFF 100%); -pie-background: linear-gradient(bottom, #0BDFD8 0%, #FFFFFF 100%); -webkit-box-shadow: #333 0 0 5px; -moz-box-shadow: #333 0 0 5px; box-shadow: #333 0 0 5px; behavior: url(https://hocwebchuan.com/example/js/pie.htc); } .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:
Tham khảo thêm tại: CSS3 PIE