Question

在图像的角落处以编程方式（使用HTML，CSS，JavaScript和/或PHP）的最佳方式是什么？

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

此方法的主要特点是：

将图像包装到一个元素中，您可以在该元素中对边框进行舍入，并将包装元素背景设置为所需图像。
将实际图像不透明度设置为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>

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

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

图片非手动大小： http://jsfiddle.net/trpeters1/wxXAn/1/

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

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

更新感谢Tom（见下文），这个问题已经解决了。启用重新调整大小的关键是将图像和包装纸高度和宽度设置为相同的大小。请看这个小提琴并与上面的那个相提并论，看看我的意思：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;标签，然后你就会得到带有圆角的小狗。

希望这就是你所追求的目标。

由于

如何圆角图像？

1 个答案: