Drupal で標準ベースでブラウザ間互換性のある丸い角を作成する最良の方法は何ですか?

Question

私は現在、デザイナーが Drupal 6 テーマに取り組んでいます。 明示的に 丸い角を多用することを要求します。

もちろん、伝統的に画像を使用して丸い角を作成することもできます。しかし、丸い角を作成するもっと簡単な方法もあるはずだと私は知っています。

理想的には、次のようなセレクターを使用して、CSS を標準に準拠した CSS3 として作成したいと考えています。

h2 {border-radius: 8px;}

ブラウザ固有のCSSの使用も非常にOKです。

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

必要に応じて、カスタム JavaScript を手動で挿入することもできます。マークアップにさらに 100 個の角の丸い画像を追加することは避けたいだけです。

最善のアプローチについて何か提案はありますか?

Answer 1

「roundyコーナー」のようなクラスを定義し、そのようにjQueryのコーナープラグインを使用します：

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

あなたは、jQueryのroundyコーナープラグインが必要になります

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

私はそれは、ソース文書内の任意の追加のマークアップを必要としないため、ここではJavaScriptを使用したいです。必要に応じてスクリプトは、プレースホルダ要素を挿入します。また、我々はすべての飛行の車を持っているとIEが国境半径をサポート遠い、遠い将来に、あなたは純粋なCSSでそれを置き換えることができます。

Answer 2

推奨される角丸プラグインを使用するための Drupal 固有の注意事項:

1. ダウンロード jquery.corner.js それを Drupal インストールの script フォルダーに置きます。ファイルのアクセス許可を正しく設定してください。
2. 次の行を template.php に追加して、(Zen) テーマにスクリプトをロードします。 drupal_add_js('scripts/jquery.corner.js');
3. 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'
);

それでおしまい！！！画像がなくても角が丸いのが美しい！