如何制作圆角图像或圆形图像

Question

我有一些图片，我想在我的网页上显示它们。但问题是我想让他们的角落四舍五入。圆角的深度取决于，有时我想要圆润的圆角，有时我想要非常深的圆角，这样它就像圆形图像。

什么是正确的方法呢？

Answer 1

您可以使用以下css：

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

注意： - 除IE9外，这在IE中不起作用。

Answer 2

/* Gecko browsers */
-moz-border-radius: 5px; 
/* Webkit browsers */
-webkit-border-radius: 5px; 
/* W3C syntax - likely to be standard so use for future proofing */
border-radius: 5px;

使用全部3以确保最兼容。除IE9外，IE7和IE8不支持border-radius。然而，有一些JavaScript黑客，大多数涉及一堆1px元素绝对定位或使用SVG。

Answer 3

一些主流浏览器不支持圆角（好吧可能是一个主流浏览器......是IE）。获得跨浏览器解决方案的唯一方法是使用jQuery插件来绕过角落。

Tutorial on rounded corners

Answer 4

去这里

此处自动生成所有特定于浏览器的CSS

http://css3generator.com/

或

http://css3please.com/