边框半径不适用于 img 元素答案

【问题标题】：border-radius is not applied to img element边框半径不适用于 img 元素
【发布时间】：2017-02-20 19:18:18
【问题描述】：

我试图在 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 的回复，他们确认他们能够重现该问题并正在进一步调查。

【问题讨论】：

@dystroy：不再是了； IE10 上个月与 Windows 8 一起进入 RTM。但是它还不能用于 Windows 7。我假设它会在下个月 Windows 8 向公众发布后可用。
@BoltClock 那么我们可以在我们的 PC 上安装 IE 10 还是需要 Windows 8？请提供一些链接。（我现在在办公室。不能在这里安装任何东西）
目前，IE10 RTM 仅适用于 Windows 8 RTM。
我添加了一个指向 IE 反馈板的链接，connect.microsoft.com/IE/feedback/details/765155/…

【解决方案1】：

我刚刚遇到了同样的问题，即圆角未在 IE 10 中应用于图像。原来我有这个：

border-radius: 45px 0 45px 0;

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

最后我应用了这个样式：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

HTML

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

CSS

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

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

【讨论】：