border-radius.htc使边框变圆，但不是图像

Question

我正在使用border-radius.htc，尝试在IE7中制作圆角。它部分工作，边框变圆角，但不是图像，导致方形图像后面的圆形边框。

<div id="container">
 <ul>
  <li>

    <img src="test.png">

  </li>
 </ul>
</div>

CSS

#container {
   position:relative;
   top: -20px;
   width:1000px;
   margin: 0 auto;
   margin-left:-10px;
}

#container li {
   float:left; 
   list-style:none; 
   margin: 0 5px; 
 }

#container ul li {
  width:180px; 
  height:200px;
}

#container ul li img {
   width:175px; 
   height:175px; 
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
   border-radius: 999px;
   border: solid 3px #fff; 
   behavior: url(.../css/border-radius.htc);
}

Answer 1

为图片添加overflow: hidden;

#container ul li img {
   width:175px; 
   height:175px; 
   -webkit-border-radius: 999px;
   -moz-border-radius: 999px;
   border-radius: 999px;
   border: solid 3px #fff; 
   behavior: url(.../css/border-radius.htc);
   overflow: hidden; 
}

你必须这样做的原因是，理论上从div中溢出的图像的角落是隐藏的。