图像上的边框半径..（圆角）

Question

尝试为也有边框的图像添加圆角。

想出了以下几点：

http://jsfiddle.net/tgqBG/

但是图像下方的空白，以及边框和图像的角不匹配的事实看起来一点也不好看。 难道我做错了什么？

谢谢，韦斯利

Answer 1

添加overflow:hidden; 到.thumb_container ，添加vertical-align:bottom; 到图像。

您可以删除许多其他值，这是一个更新的 jsfiddle：

http://jsfiddle.net/tgqBG/12/

另一种方法（更多浏览器支持）是通过background-image显示图像。 在我的评论中，我说这会造成问题，因为元素需要固定尺寸，但是我刚刚意识到这可以很容易地通过将图像放在那里但隐藏它来解决。

http://jsfiddle.net/tgqBG/51/

这在没有float的情况下不起作用，因为它将获得100%的宽度。 这是因为div的自动属性被呈现为一个block 。

要解决此问题，请将div更改为span然后添加display:inline-block; .

http://jsfiddle.net/tgqBG/52/

Answer 2

您应该考虑到小于其容器（图像）的元素应该具有较小的角半径，以便与外部元素的角半径对齐（意味着具有相同的曲率）。 尝试像 15px 的图像边界半径。 这似乎适用于您的示例。

Answer 3

试试这个： http://jsfiddle.net/tgqBG/39/

内部图像较小，因此需要具有较小的边界半径。 边距和填充默认为 0。避免像瘟疫一样的浮动。 Vertical-Align:top 正确地对齐图像。