纯CSS实现兼容ie6以上的圆角头像

先贴下各种浏览器下的效果图：
1、IE6
2、IE7
3、Chrome
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>真正兼容IE6以上的圆角头像</title>
    <style type="text/css">
        .header {
             100px;
            height: 100px;
            background: url(/images/head.jpg) no-repeat center;
            border-radius: 50px;
            background-size: 100% 100%;
            *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/head.jpg',sizingMethod='scale');
            *position: relative;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/head.jpg',sizingMethod='scale')9;
            position: relative9;
        }

            .header div {
                display: none;
                *display: block;
                display: block9;
                 100%;
                height: 100%;
                position: absolute;
                z-index: 10;
                left: 0;
                top: 0;
                background: url(/images/balay.png) no-repeat center;
            }
    </style>
    <!--[if IE 6]>
    <script type="text/javascript" src="/js/ie6-png.min.js"></script>
    <script type="text/javascript">
        DD_belatedPNG.fix('.header div');
    </script>
    <![endif]-->
</head>
<body>
    <div class="header">
        <div></div>
    </div>
</body>
</html>
源代码下载