Question

我在尝试获取图像的半径方面遇到了麻烦。为了演示目的，我简化了我的问题并夸大了变量。

CSS ：

div.wrap img {
    -moz-border-radius: 50px;
         border-radius: 50px;
}
img.pic {
    padding: 15px 25px 35px 45px;
}

HTML ：

<div class="wrap">
    <img class="pic" src="http://i.imgur.com/UAef0.jpg"
         width="300" height="300" />
</div>

如果我移除衬垫，噗，漂亮的角落。如果它有所帮助，那么他们就有两个不同的类别。 “wrap”中可以包含多个“pic”。有时候他们会属于同一个班级，有时他们也不会，就像这样：

img.left_pic  { float:left;  padding:5px 10px 5px 5px; }
img.right_pic { float:right; padding:5px 5px 5px 10px; }

任何帮助或见解都将不胜感激。

编辑解决方案：

This或多或少是我基本上想做的事情。我想我有一个'呃'的时刻。我现在确定我需要使用的声明是保证金 而不是 填充。另一个Thanx to GGJ提醒我如何以正确的方式去做。还有Jan所说的将填充添加到'img'标签没有任何意义，它没有。我的坏。

Answer 1

您的边框半径将位于填充之外，请尝试设置边距，而不是边框之外的空间。

Answer 2

将“换行”上的填充设置为不在图像上（在图像上设置填充没有多大意义:)），这应该可以解决您的问题。

Answer 3

这是在某些浏览器（主要是IE和safari）中将padding和border-radius应用于同一元素的副产品。 border-radius更改框模型的边框组件的曲率，该模型围绕填充组件。

除了其他答案之外，另一个似乎可以解决问题的有趣的事情是添加边框线。如果您不想看到边框，可以使用border: 1px solid transparent，如下所示：

.invisible-border {
    border: 1px solid transparent;
}

screenshot

Answer 4

使用span而不是img遇到相同的问题。情况并非完全相同，因为两个标签的display值不同（请参见this SO thread）。

就我而言，将display:inline-block设置为span可以解决所有问题。

Answer 5

后但以某种方式找到了解决方案。您无法使用它制作一个圆，但是可以通过在下面做些微的半径来使用它，这是我解决方案的一个示例。

我的图片需要10像素的填充和5像素的半径，加边框半径：15像素对我来说效果很好

我希望解释会更好。