CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

基本的なbox‐shadowの使い方

課題

Backgrounds&BordersLevel3（w3.org/TR/css3‐background）が

まだ草案だった頃に、CSS作業グループでは背景画像と同じように複数の

ボーダーを認めるかどうかについて議論が続いていました。しかし当時の

結論は、十分な数のユースケースがまだないというものでした。そして開

発者は、 border‐imageを使って同じ効果を得るように強いられていま

した。開発者はCSSのコードの中でボーダーを調整できることを望んでい

ましたが、CSS作業グループはこの点を軽視していました。その結果、複

数の要素を使って複数のボーダーを擬似的に再現するといったみにくいハ

ックが横行しました。ただし、このように無駄な要素に頼ってマークアッ

プを汚さなくても、同等の効果を得る方法があります。

box‑shadowを使った解決策

ほとんどの読者は、 box‐shadowを利用（あるいは多用）して影を表示

したことがあるでしょう。 しかし、このプロパティに 4 つ目のパラ

メーターを記述して「拡散半径」を指定できることはほとんど知られてい

ません。正の値を指定すると影が広がり、負の値では影も狭まります。オ

複数のボーダー

2

66

2章：背景とボーダー

フセットとぼかしの半径をゼロにし、拡散半径として正の値を指定する

と、影ではあるけれども実線のボーダーのように見える表示を得られます

（図2.5 ）。

borderプロパティを ...