圆角答案 - 爱码网

【问题标题】：Rounded Corners圆角
【发布时间】：2013-11-09 23:48:34
【问题描述】：

我想知道以编程方式为图像制作圆角的最佳方法是什么。这可以使用 PHP 或 javascript。算法也可以做到这一点，我可以使用 Image::Magick 或 GD 对其进行编码。

感谢您的宝贵时间。

【问题讨论】：

复制：stackoverflow.com/questions/7089/…stackoverflow.com/questions/823218/…
不太确定这个问题，因为它听起来很简单。画 4 个圆 us3.php.net/manual/en/function.imagickdraw-circle.php 和 2 个矩形怎么样？ us3.php.net/manual/en/function.imagickdraw-rectangle.php
Ups，在 imagemagick 中甚至还有一个绘制圆形 ractangles 的函数：us3.php.net/manual/en/function.imagickdraw-roundrectangle.php

标签： php javascript rounded-corners

【解决方案1】：

使用border-radius。

IE9+、Firefox 4+、Chrome、Safari 5+、Opera 支持。

为了获得最好的浏览器支持，您应该使用 -webkit- 和 -moz- 前缀：

.round {
  /* Safari 3-4, iOS 1-3.2, Android 1.6- */
  -webkit-border-radius: 12px; 

  /* Firefox 1-3.6 */
  -moz-border-radius: 12px; 

  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
  border-radius: 12px; 
}

如果您需要适用于旧版浏览器的 JavaScript 解决方案，请查看 jQuery Corner。

【讨论】：

【解决方案2】：

我会使用curvy corners 或nifty cube

【讨论】：

曲线角 FTW！ :D 漂亮的角落不能总是在 IE 中圆润。我在 Drupal 的主菜单中尝试过，但在 IE 中不起作用。

【解决方案3】：

嗯，这取决于你到底需要什么。你想让角落是透明的，还是用某种颜色填充？哪种图像格式？

以下是制作圆角的一些帮助： http://www.imagemagick.org/discourse-server/viewtopic.php?f=1&t=8401

检查一下，如果没有帮助，请用具体问题更新您的问题。那么我们或许可以提供帮助:-):

【讨论】：

【解决方案4】：

您可以将上面提到的标签与 CSS 一起使用，对于 IE，使用带有一些 jquery 代码的 DDRoundies 以使其在 IE 中工作。这是我必须做的才能让它工作。 http://swiftmailer.org/ 站点就是一个很好的例子。他们利用了我提到的内容。

【讨论】：

【解决方案5】：

使用 JavaScript 以编程方式获取 round corners

或

您可以使用 mozilla 和 safaris 浏览器扩展来使用 CSS 获得圆角，但它仅适用于 Mozilla 和 Safari

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

【讨论】：

这自动使它成为一个不可行的解决方案，看到 90+% 的用户仍在使用 IE 的错误废话
使那个 65.80% [en.wikipedia.org/wiki/… （或者，无论如何，这个数字附近的东西）。此外，希望开始获得用户的 IE8 似乎较少出现问题。
这条评论是给：未来精英。不要收缩自己。如果 90+% 的人都在使用它，那怎么可能是马车垃圾！我知道 IE 有一些缺陷，但它确实在变得更好。

【解决方案6】：

以下是两个基于 PHP 的解决方案的链接：

Apply rounded corners to images 是一个在图片本身嵌入圆角的 PHP 脚本
PHP rounded corner generator script 生成四个角，您可以使用 CSS 定位将它们放置在图像上 - 或者您可以在需要圆角框的 CSS/HTML 布局中使用它们。

【讨论】：

谢谢。解决方案 1 正是我所需要的：一种生成圆形图像的方法，这些图像之后只是图像，没有棘手的 css 或 javascript。

【解决方案7】：

另一个是Thumbnailer 类。

【讨论】：