实现圆图像
最近项目需要实现圆图像，自从有了CSS3的border-radius之后，实现变得简单了，但IE8及其以下依然不给力。
1.在网上搜寻解决方案，很多人提及ie-css3.htc文件，于是试了试，确实可以实现一般DIV的圆角，但对于img元素不生效，即便改变它的display属性。
2.接着又把图片作为了该div的背景，然后设置其border-radius，确实可以见到效果，但对背景图要求太高，需要与该div的大小一致，本来想利用css3的背景剪裁，转念一想是IE的hack,就此罢手把。鉴于用户上传图片必定大小不一，继续寻找解决方案。
3.最后，想了个折中的解决方案。
层结构如下：
1 <div class="p-img-radius" style="width:100px;height:100px;position:relative;overflow: hidden;"> 2 <img src="images/1b4c510fd9f9d72a1ae4f617d62a2834349bbb3c.jpg" width="100" height="100"> 3 <div class="ie-raduis p-disply-none"></div> 4 </div>
其中class为ie-raduis的层在多数浏览器下隐藏，当浏览器是IE678时，便加载其特定样式：
.ie-raduis{display:block;width: 100px;height: 100px;position:absolute;top:0px;left:0px;background: url("../images/ie-raduis.png") top left no-repeat;}
应该想到这个.ie-raduis的背景图就是一张大小与该div一致，但中间抠了个圆形的透明区，然后用绝对定位就能盖住头像的其它部分，只露个圆形区域了。
注意：可能png图片在IE6下显示效果不好，但不用慌，把图片上传到这个网站压缩一下，就会神奇的好了。网址：https://tinypng.com/。
