［CSS］CSSでdivボックスにシャドウをつけてみました（IE対応）

2011年6月19日

★



IE6/7/8でもCSS3のようにボックスにシャドウをつけるスタイルシート | コリス


ソースコードは概ねこんな感じで。組み込み時にclass名のカスタマイズが必要だと思う。

私はcontainerを元々あったmainにしてしまいましたが。



 

  

　　
ボックスの中身

  
 
 
 

 



スタイルシートに以下を記述。こちらはＩＥ以外のブラウザ用の記述です。

.container {padding-left:10px;}

.shadow {float:left;}

.frame {position:relative; background:#fff; padding:10px; display:block;

-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);

}

.clear {clear:left;}



head部に以下を記述。こちらはＩＥ用の記述です。




ほんとはＩＥ用もスタイルシートに記述したかったのだが、６，７，８それぞれのハックがめんどくてhead部にしてしまいました。

後々もっとスマートな方法を考えようと思います。






				








Web制作メモ
Posted by ponnao