在Drupal中創建基於標準的，跨瀏覽器兼容的圓角的最佳方式是什麼？

我目前正在研究Drupal 6主題，其設計者是明確請求使用很多圓角。在Drupal中創建基於標準的，跨瀏覽器兼容的圓角的最佳方式是什麼？

我當然可以創建圓角 - 傳統上 - 與圖像。但我知道還必須有更好更簡單的創建圓角的方法。

理想情況下，我想我寫CSS爲符合標準的CSS3，與像選擇：

h2 {border-radius: 8px;}

使用瀏覽器特定的CSS是很確定，也就像

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

如果需要，我還可以手動插入一些自定義JavaScript。我只是想避免爲我的標記添加另外100個圓角圖像。

有關最佳方法的任何建議？

來源

2010-02-22 jsalonen

嘿，我正在努力解決完全相同的問題。使用圖像是我到目前爲止所做的工作，但是它有很多工作，我也很樂意找到一個更簡單的解決方案... – mingos 2010-02-22 12:51:09

嘗試使用圓角插件！它爲我工作的魔術。 – jsalonen 2010-02-22 13:37:20

定義，如「羅迪角」一類，並使用jQuery的角落插件像這樣：

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

您需要jQuery的羅迪角落插件：

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

我喜歡在這裏使用JavaScript，因爲它不需要源文檔中的任何附加標記;該腳本將根據需要插入佔位符元素。另外，在遙遠的未來，當我們都有飛行汽車並且IE支持border-radius時，您可以用純CSS替換它。

來源

2010-02-22 12:49:59 olooney

我應該補充說明，插件支持時使用瀏覽器特定的border-radius CSS。 – olooney 2010-02-22 12:53:15

其次從上面的鏈接正常--- $（羅迪角）.corner（「輪8像素」）這個幾個例子。父（）。CSS（ '填充'， '4PX'） .corner（「輪10px的」） ---

Thin

--- FAT $（羅迪 - cornerFat）.corner（「輪8像素」）。父（）。CSS（ '填充'， '8像素' ）.corner（「round 14px」） ---

Fat

（bah，沒有換行符） – Matt 2010-02-22 12:59:32

謝謝！正是我在找的！ – jsalonen 2010-02-22 13:01:12

一些Drupal的具體說明，以使用建議的圓角插件：

下載jquery.corner.js並把它放到你的Drupal安裝的腳本文件夾中。確保正確設置文件權限。
通過向template.php添加以下行來加載腳本（（Zen）：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' 
);

這就是它！美麗的圓角沒有圖像！

來源

2010-02-22 13:40:55 jsalonen

在Drupal中創建基於標準的，跨瀏覽器兼容的圓角的最佳方式是什麼？

回答

相關問題