on:2011年7月22日sponsors高さが可変のボックスに、二重のボーダーの外観を与える5つの実装方法を紹介します。CSS[ad#ad-2]デモでは、下記に紹介する5つのメソッドで実装したボックスが確認できます。デモページ各ボックスは「Check」をクリックすると、ボックスの高さを拡張します。以下は、これらの5つの実装方法と解説を意訳したものです。borderとoutlineborderプロパティとoutlineプロパティを併用します。この方法はoutlineプロパティをサポートするブラウザだけうまくいきます、つまりIE6/7以外です。#888;}この方法が機能するのは、outlineがボックスの外に配置されるためです。outlineを使用する際の問題点は、周りのエレメントに影響を与えないということです。他のエレメントに重なってしまいます。疑似要素を使用する場合は、borderが流動でないようにしておく必要があるためちょっとしたトリックを使用し、垂直方向に流動であるようにします。10;}ポイントはz-indexの設定です、これは疑似要素をコンテンツに重なることを阻止するために使用しています。absolute;」と「min-height:100%;」の設定で流動性を保ちます。box-shadow今回のさまざまなメソッドを試すきっかけとなったものです。この方法は最もシンプルで、たった一行のコードで実現できます。#888;}シャドウを二重にするために「,(コンマ)」を使用しています。一つ目のシャドウが二つ目に重なるため、二つ目のサイズは一つ目の倍にする必要があります。ポイントとなるのは、ぼやけを無くし完全に不透明な色を使用することです。その結果、borderのようにストレートなエッジをシャドウに与えます。これはbox-shadowをサポートするブラウザに限定されます。div要素の追加divを内包するdiv要素を追加し、二重のborderのエフェクトを与えます。内側のdiv要素には単に背景色(#222)を指定し、追加した外側のdiv要素のborderとbackgroundで二重のborderを設定します。auto;」を指定し、外側のdiv要素のサイズを12px大きいものにすることです。border-imagebox-shadowと同様にもう一つモダンブラウザ用に、CSS3のborder-imageを使う方法があります。*/}使用する画像は、下記のように小さなものです。Posts関連記事が見つかりませんでした。