IE9下给div设置filter之后border-radius失效？

Question

filter是引一张图片，怎样让这个dt看起来有个border-radius的效果呢？

Answer 1

Just set border-radius property on parent element and set overflow: hidden, while the filter property still set on child element.

Example follows:

<style type="text/css">
.round {
  width: 200px;
  height: 150px;
  overflow: hidden;
  border-radius: 10px;
}
.bg {
  width: 100%;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='example.jpg');
} 
</style>
<div class="round">
  <div class="bg"></div>
</div>