边框半径不适用于 chrome 中的相对定位图像答案

【问题标题】：Border-radius doesn't work with relative positioned image in chrome边框半径不适用于 chrome 中的相对定位图像
【发布时间】：2012-07-26 12:18:32
【问题描述】：

我有一个具有以下样式的 div：

overflow:hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

里面有图片，但是高度对应另一个div的高度，包含文字。

如果 div 包含的文本不足，则图像会在第一个 div 内向上移动。因为它已经隐藏了溢出，所以你不会看到这个。所有这一切都很好，直到我想给第一个 div 一个边界半径，它只是没有显示出来。这只发生在 chrome、firefox 和 IE 中它确实有效。

【问题讨论】：

【解决方案1】：

这是 div 内图像上的边框半径，我不完全理解您的问题，所以修改我制作的这个 JSFiddle 以向我展示它的实际含义。

【讨论】：

【解决方案2】：

我不确切知道您想要达到什么效果，但这里有一个示例，可以通过将图像设置为背景图像在 Chrome（和其他）中工作。

还有一个将半径应用于图像：

此外，border-radius 属性已在所有支持它的浏览器中“取消前缀”，因此您只需要：

    border-radius: 20px;

【讨论】：