在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; border-radius：8px;} 
  

手动插入一些自定义JavaScript。

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

解决方案

定义类似roundy-corner并使用jQuery角插件，如下：

 code> $（'。roundy-corner'）。corner（）; 
  

您将需要jQuery圆角插件：

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

我喜欢这里使用JavaScript，因为它不需要在源文档中添加任何标记;脚本将根据需要插入占位符元素。此外，在远，远的未来当我们都有飞行汽车和IE支持border-radius，你可以替换它与纯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屋！