缩略图上的圆角

Question

是否可以使用css使缩略图的边角变圆？

编辑 - html的起点是：

<img src='test.jpg' width='50' height='50' />

一开始它没有css，我想要稍微绕过角落......

EDIT +注意：moz-border方法并没有真正围绕图像本身的角落，这正是我所希望的，而是绕着图像周围的边界四角。看起来不错......

Answer 1

扩展@ Clayton的答案：

您可以在任何现代浏览器中原生地执行此操作：

-moz-border-radius: 5px;
border-radius: 5px;

供应商前缀-moz可能很快就会消失。

请参阅this jsfiddle以了解相关信息。另请注意，舍入将直接应用于<img>元素。

这适用于所有5种主流浏览器的所有当前版本。

Answer 2

为了更好地说明这一点，以下两行将在Firefox，Chrome和IE9中实现预期的效果。

-moz-border-radius: 5px;
border-radius: 5px;

可在此处找到更多信息： http://www.css3.info/preview/rounded-border/

要在IE8中完成此操作，您需要使用javascript。这个jquery插件可以解决这个问题：http://jquery.malsup.com/corner/

Answer 3

是的，使用漂亮的角落技术。漂亮的角落是一种产生圆形边缘的旧方法。它将在所有浏览器（旧版和新版浏览器）中运行

http://www.html.it/articoli/nifty/index.html

Answer 4

您可以使用border-radius。它不适用于<img>元素，但您可以将border-radius应用于<div>，并将图像作为背景图像。

Answer 5

此代码将围绕所有四个角并且它也支持Opera。

img { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

克莱顿的解决方案只围绕前两个角落，这可能是也可能不是你想要的。