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

问题描述

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

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

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

<块引用>

h2 {border-radius: 8px;}

使用特定于浏览器的 CSS 也是可以的，就像

<块引用>

h2 {-moz-border-radius: 8px;-webkit-border-radius: 8px;边界半径:8px;}

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

对最佳方法有什么建议吗?

解决方案

定义一个像roundy-corner"这样的类并像这样使用 jQuery 角插件:

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

您将需要 jQuery 圆角插件:

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

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

I am currently working on a Drupal 6 theme, for which designer is explicitly requesting to use A LOT of rounded corners.

I could of course create the rounded corners - traditionally - with images. But I know there must be also better and easier ways of creating rounded corners.

Optimally, I would like to write my CSS as standards-compliant CSS3, with selectors like:

h2 {border-radius: 8px;}

Use of browser-specific is CSS is very OK also, like

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

If required, I can also insert some custom JavaScript by hand. I just want to avoid adding yet another 100 rounded corner images to my markup.

Any suggestions on the best approach?

解决方案

Define a class like "roundy-corner" and use the jQuery corner plugin like so:

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

You will need the jQuery roundy corner plugin:

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

I like to use JavaScript here because it doesn't require any additional markup in the source document; the script will insert placeholder elements as needed. Also, in the far, far future when we all have flying cars and IE supports border-radius, you can replace it with pure CSS.

这篇关于在 Drupal 中创建基于标准、跨浏览器兼容的圆角的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！