PIE – tổng hợp

Trở về

  • 3,206

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

  • 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="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:

Click để xem demo.

Download file để thực hành

Tham khảo thêm tại: CSS3 PIE

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.