Image 如何使图像圆角？

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

我一直在使用这个CSS唯一的方法：

这种方法的主要特点是：

将图像包装到一个元素中，在该元素中可以环绕边框，并且可以将包装元素背景设置为所需的图像

将实际图像不透明度设置为0

向左浮动包装，使图像和包装对齐

以下是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>​

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

未手动调整图像大小：

图像设置为50px宽/50px高：

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

更新 多亏了汤姆（见下文），这个问题才得以解决。启用重新调整大小的关键是将图像和包装的高度和宽度设置为相同的大小。请看这把小提琴并和上面的一把比较，看看我的意思：

---

请注意，在这把小提琴中，

和

标记的高度和宽度都设置为50px。

我使用以下代码使其工作

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

我添加了

背景大小：50px 50px标记，然后你得到一只圆角的小狗

希望这就是你想要的

谢谢
我通过使用以下代码使它工作

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

我添加了
背景大小：50px 50px标记，然后你得到一只圆角的小狗

希望这就是你想要的

谢谢
嗨，汤姆，是的，这很好用！这是你描述的小提琴：谢谢！伟大的还感谢您向我介绍JSFIDLE——非常酷和有用的网站。嗨，汤姆，是的，这非常有用！这是你描述的小提琴：谢谢！伟大的还感谢您向我介绍JSFIDLE-非常酷和有用的网站