如何使用 jQuery Round Corner 插件制作圆角？答案

【问题标题】：How can I use the jQuery Round Corner plugin to make round corners?如何使用 jQuery Round Corner 插件制作圆角？
【发布时间】：2009-08-21 15:09:04
【问题描述】：

我的网站需要一个圆角。一般来说，我对 jQuery 和 JavaScript 相当缺乏经验。加载和调用此插件的正确方法是什么？

【问题讨论】：

您的问题需要更多详细信息，看来您只是希望我们为您完成所有工作。
如果您的用户非常精通技术，您只需使用 CSS 即可。 Safari 和 FF 都支持 CSS 中的圆角。但是，如果您必须支持 IE 用户，则需要该插件
@Jakub 详细信息在那里。如何使用 jQuery 和 CSS 实现圆角。
@Kip。有些精通技术的用户使用 IE。
@Rajasekar：如果可行的话，选择一个“已接受的答案”怎么样？

标签： jquery css ajax jquery-plugins

【解决方案1】：

您需要使用 jquery.corner.js 并在您的脚本中添加

$(document).ready(function(){
  $("#box1").corner();
});

在你的标记中，你应该有：

<div id="box1"></div>

您可以查看 jQuery Rounded Corners Tutorial 了解更多信息。

【讨论】：

我必须在哪里包括这个@Randell
像这样？ @兰德尔
是的，为了您的方便，我还编辑了示例。确保您已添加 jquery.js 和 jquery.corner.js。
是否有一些相关的 css 与此相关？它似乎对我不起作用。

【解决方案2】：

1.将此代码添加到您的 head 部分（假设您的 jquery 是本地的）：

<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.corner.js" type="text/javascript"></script>

<script type="text/javascript">
      $(function(){
          $('div.round').each(function() {
              var q = $(this).corner("rounded 7px");
              eval(q);
          });
      });
</script>

2。将 class="round" 添加到 div 包装器

<div class="round"></div>

只需将 class="round" 添加到任何 div 你想在你的页面上。
更改 7px 值以调整角的“圆度”。更高的数字更圆。

【讨论】：

【解决方案3】：

我会说go with css3。对于 Firefox，它是：

.roundedCorners { -moz-border-radius: 5px; }

对于 Safari/Chorme 它是：

.roundedCorners { -webkit-border-radius: 5px; }

我会停在那里。由于这纯粹是一个演示/外观的事情，我不会弄乱 JavaScript 解决方案。如果您的用户没有使用支持 css3 的浏览器，他们就不会得到圆角。

【讨论】：

不，IE 不支持 CSS3 :(