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

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替换它.