Question

我目前正在研究Drupal 6主题，设计师显式请求使用大量圆角。

我当然可以创建圆角 - 传统上 - 用图像。但我知道必须有更好更简单的方法来创建圆角。

最理想的情况是，我想将我的CSS编写为符合标准的CSS3，选择器如：

h2 {border-radius: 8px;}

使用浏览器特定的CSS也很好，比如

h2 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}

如果需要，我也可以手动插入一些自定义JavaScript。我只是想避免在我的标记中添加另外100个圆角图像。

有关最佳方法的任何建议吗？

Answer 1

定义类似“roundy-corner”的类并使用jQuery角落插件，如下所示：

$('.roundy-corner').corner();

你需要jQuery圆角插件：

http://www.malsup.com/jquery/corner/

我喜欢在这里使用JavaScript，因为它不需要源文档中的任何额外标记;该脚本将根据需要插入占位符元素。此外，在遥远的未来，当我们都有飞行汽车和IE支持border-radius时，你可以用纯CSS替换它。

Answer 2

使用建议的圆角插件的一些Drupal特定注释：

下载jquery.corner.js并将其放入Drupal安装的脚本文件夹中。确保正确设置文件权限。
将以下行添加到template.php中，在（Zen）主题中加载脚本：drupal_add_js('scripts/jquery.corner.js');
通过再次向template.php添加样式命令，将圆角分配给页面的任何部分。请注意，您需要使用drupal_add_js方法挂钩它们。例如：

drupal_add_js(
  "$(document).ready(function() {
       $('#primary a').corner('top round 4px');
       $('.block-inner h2.title').corner('top round 4px');
   });",
  'inline'
);

就是这样！没有图像的美丽圆角！

在Drupal中创建基于标准的，跨浏览器兼容的圆角的最佳方法是什么？

2 个答案: