6

我目前正在研究 Drupal 6 主题，设计师明确要求使用很多圆角。

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

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

h2 {border-radius: 8px;}

使用browser-specific是CSS也很OK，like

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

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

关于最佳方法的任何建议？

4

2 回答 2

7

定义一个像“roundy-corner”这样的类并像这样使用jQuery角插件：

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

您将需要 jQuery 圆角插件：

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

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

于 2010-02-22T12:49:59.503 回答
1

使用建议的圆角插件的一些 Drupal 特定说明：

  1. 下载jquery.corner.js并将其放到 Drupal 安装的脚本文件夹中。确保正确设置文件权限。
  2. 通过将以下行添加到 template.php，在您的 (Zen) 主题中加载脚本：drupal_add_js('scripts/jquery.corner.js');
  3. 通过将样式命令再次添加到 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'
);

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

于 2010-02-22T13:40:55.143 回答