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

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这样的图像border-radius。这似乎适用于你的例子。

Answer 3

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

内部图像较小，因此需要具有较小的边界半径。边距和填充默认为0.避免像瘟疫那样的浮动。垂直对齐：顶部正确对齐图像。