如何圆角处理图像？

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>标签的高度和宽度都设置为50px。

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; 标签，然后得到带有圆角的小狗。

希望这就是你所追求的。

谢谢