图像上的边框半径..（圆角）
Trying to add rounded corners to images, that also have a border.
Came up with the following:
But it doesn't look good at all with the whitespace below the image, and the fact that the corners of the border and image don't match. Am I doing something wrong?
Thanks,
Wesley
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将
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/
Add
overflow:hidden;to.thumb_container, addvertical-align:bottom;to the image.You can remove a lot of the other values, here is an updated jsfiddle:
http://jsfiddle.net/tgqBG/12/
Another way of doing this (supported by more browsers) is showing the image through
background-image. In my comment I said this would pose a problem because the element needs fixed dimensions, however I just realized this can easily be fixed by also putting the image in there but hiding it.http://jsfiddle.net/tgqBG/51/
This doesn't work without
floatbecause it will get a width of100%. This is because ofdiv's automatic property to be rendered as ablock.To fix this, change
divtospanand then adddisplay:inline-block;.http://jsfiddle.net/tgqBG/52/
您应该考虑到，小于其容器（图像）的元素应该具有较小的角半径，以便与外部元素的角半径对齐（意味着具有相同的曲率）。尝试将图像边框半径设置为 15px。这似乎适用于你的例子。
You should take into account that an element that is smaller than its container (the image) should have a smaller corner radius for it to be aligned with the outer elements corner radius (meaning have the same curvature). Try something like 15px for the image border-radius. That seems to work for your example.
试试这个： http://jsfiddle.net/tgqBG/39/
内部图像较小，并且因此需要有更小的边界半径。边距和填充默认为 0。像瘟疫一样避免浮动。垂直对齐：顶部正确对齐图像。
Try this: http://jsfiddle.net/tgqBG/39/
The inner image is smaller, and thusly needs to have a smaller border-radius. Margins and paddings default to 0. Avoid floats like the plague. Vertical-Align:top alings the image correctly.