rounded-corners - 边框半径不适用于 img 元素

Question

我正在尝试在 IE 10 中设置一个不工作的边框半径，但在 IE 9 中可以工作。问题是当我只为图像的左上角定义半径时，图像不会被裁剪边界半径。

坏的：

<img style="border-radius: 14px 0px 0px 0px" alt="" src="">

现在，如果我在右上角或左下角添加第二个边界半径，则应用左上角半径。

好的：

<img style="border-radius: 14px 1px 0px 0px" alt="" src="">

此 URL 演示了该问题并为不使用 IE 10 的用户添加了参考图像。

更新 9/30：我在 Connect 网站上收到了 Microsoft 的回复，他们确认他们能够重现该问题并正在进一步调查。

score 5 · Accepted Answer

我只是在 IE 10 中没有在图像上应用圆角时遇到了同样的问题。最初我有这个：

border-radius: 45px 0 45px 0;

结果根本没有边界，更改 0 边界半径之一使我的边界半径再次出现。

最后我应用了这种风格：

border-radius: 45px 0.1px 45px 0.1px;

在其他浏览器中没有副作用，但我在 IE 10 中使用了圆角

score 0 · Accepted Answer

0

试试border-top-left-radius: 14px。

于 2012-09-28T13:24:59.097 回答

score -1 · Accepted Answer

据我所知，大多数浏览器不会让您剪辑带有圆形边框的图像。（即使 IE10 可以，它在其他浏览器中也可能看起来很奇怪）。最简单的解决方案是使用嵌套的 div 并将图像设置为背景：

HTML

<div class="imageborder">
  <div id="image1"> </div>
</div>

CSS

.imageborder {
  border-radius: 5px;
}
#image1 {
  background-image: (yourimage);
}

您可能必须手动设置 div 的高度才能显示。

3 回答 3