如何圆角图像？

Question

以编程方式（使用 HTML、CSS、JavaScript 和/或 PHP）绕过图像角落的最佳方法是什么？

我一直在使用这种纯 CSS 方法： http://maxvoltar.com/archive/rounded-corners-on-images-css-only

这种方法的主要特点是：

1. 将图像包装到一个元素中，您可以在该元素中使边框变圆，并且可以将包装元素背景设置为所需的图像。
2. 将实际图像不透明度设置为 0
3. 使包装器向左浮动，使图像和包装器对齐。

这是 HTML：

<p style="background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg)">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg" alt="Dog" />
</p>​

这是 CSS：

img {
vertical-align: bottom;
/*width:50px;
height:50px */ /*ideally would be able to alter these as needed*/
}

p { 
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
}

很遗憾，当您重新调整图像大小时，此代码会失败。请比较以下两个小提琴以了解我的意思：

图像未手动调整大小： http://jsfiddle.net/trpeters1/wxXAn/1/

图片设置为 50px 宽/50px 高： http://jsfiddle.net/trpeters1/wxXAn/2/

如果您想保留重新调整图像宽度/高度大小的能力，有没有办法挽救这种方法？还有比这种方法更好的方法吗？

更新 感谢汤姆（见下文），这个问题得到了解决。启用重新调整大小的关键是将图像和包装器的高度和宽度设置为相同的大小。请查看此小提琴并与上面的进行比较以了解我的意思：http://jsfiddle.net/trpeters1/wxXAn/13/

请注意，<p> 和 <img> 标签的高度和宽度都设置为 50 像素。

Answer 1

我设法通过使用以下代码使其工作

p {
float: left;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
box-shadow: #000 0 2px 10px;
background-size:50px 50px;
}

我添加了background-size:50px 50px; 标签，然后你就得到了圆角的小狗。

希望这就是你所追求的。

谢谢