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

Posted 2023-02-21

【中文标题】在 Drupal 中创建基于标准的、跨浏览器兼容的圆角的最佳方法是啥？

【英文标题】：What is the best way to create standards-based, cross-browser compatible rounded corners in Drupal?在 Drupal 中创建基于标准的、跨浏览器兼容的圆角的最佳方法是什么？

【发布时间】：2011-01-19 15:07:36

【问题描述】：

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

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

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

h2 border-radius: 8px;

使用特定于浏览器的CSS也很好，喜欢

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

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

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

【问题讨论】：

嘿，我正在努力解决完全相同的问题。到目前为止，我一直在使用图像，但工作量很大，我也很乐意找到更简单的解决方案...

试试圆角插件！它对我有用。

【参考方案1】：

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

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

您将需要 jQuery 圆角插件：

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

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

【讨论】：

我应该补充一点，该插件在支持时使用浏览器特定的边框半径 CSS。

第二个来自上面链接的几个例子 Normal --- $(.roundy-corner).corner("round 8px").parent().css('padding', '4px' ).corner("round 10px") --- Thin --- FAT $(.roundy-cornerFat).corner("round 8px").parent() .css('padding', '8px').corner("round 14px") --- Fat （呸，没有换行符）

谢谢！正是我想要的！

【参考方案2】：

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

下载jquery.corner.js 并将其放入 Drupal 安装的脚本文件夹中。确保正确设置文件权限。 在你的 (Zen) 主题中加载脚本，在 template.php 中添加以下行：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'
);

就是这样！！！没有图像的漂亮圆角！