边框半径和填充不好玩

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; }

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

jsFiddle:http://jsfiddle.net/NwfW6/

编辑解决方案:

这或多或少是我基本上想做的事情.我想我有一个'呃'的时刻.我现在肯定我需要使用的声明是margin 而不是 padding.另一个Thanx to GGJ提醒我如何以正确的方式去做.还有Jan所说的将填充添加到'img'标签没有任何意义,但事实并非如此.我的错.

Answer 1

您的边框半径将位于填充之外,请尝试设置边距,而不是边框​​之外的边距.

Answer 2

设置"包裹"上的填充不在图像上(在图像上设置填充没有多大意义:)),这应该可以解决您的问题.