クロスブラウザボックスシャドウ

こんにちは親愛なる読者。 今日は、box-shadow cssプロパティのクロスブラウザー実装の非常に簡単な方法をご紹介します。 この方法は非常に単純で明白なので、インターネット上で同様の解決策を見つけることができなかったことに非常に驚きました（私は開拓者ではないことは確かですが）。







まず第一に、cssは通常のブラウザー用です。

Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }

1. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
   
   
   
   
2. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
   
   
   
   
3. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
   
   
   
   
4. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
   
   
   
   
5. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
   
   
   
   
6. Copy Source | Copy HTML div { background : green ; /* ie */ -webkit-box-shadow: 0px 0px 15px #222 ; -moz-box-shadow: 0px 0px 15px #222 ; box-shadow: 0px 0px 15px #222 ; }
   
   
   
   

つまり、box-shadowプロパティを実装する本質は、異なる方向の値を使用してシャドウフィルターを4回適用することです。 したがって、コンテナの輪郭全体が影で囲まれ始めます。

Copy Source | Copy HTML

1. <！-[IEの場合]>
2. < スタイルタイプ= "text / css" >
3. div {
4. フィルター ：
5. progid：DXImageTransform.Microsoft.Shadow（ color = '＃042b47'、Direction = 45、Strength = 6 ）
6. progid：DXImageTransform.Microsoft.Shadow（ color = '＃042b47'、Direction = 135、Strength = 6 ）
7. progid：DXImageTransform.Microsoft.Shadow（ color = '＃042b47'、Direction = 225、Strength = 6 ）
8. progid：DXImageTransform.Microsoft.Shadow（ color = '＃042b47'、Direction = 315、Strength = 6 ）;
9. 位置 ： 相対 ;
10. top ： -12px ;
11. 左 ： -12px ;
12. ズーム ： 1 ;
13. }
14. </ スタイル >
15. <！[endif]->

注目に値するいくつかのニュアンス：

• フィルターを使用すると影が暗くなります。したがって、同一性を実現するには、色と強度のパラメーターをいじる必要があります
• IEはブロックのサイズをシャドウの幅だけ増やします。各サイドには基本的に2つのシャドウがあるため、サイズの増加は2倍になります。 つまり 最後に、式left = top =-（strength * 2）に従ってブロックを相対的に左上に移動する必要があります
• IE6およびIE7はhasLayoutを必要とするため、ズームを1に設定します（または、hasLayoutを割り当てる幅、高さ、およびその他のプロパティ）。
• ブロックの場合、背景を設定する必要があります。そうしないと、フィルターが子要素に適用されます

短所：

• フィルターは常に追加のブレーキです
• IEはフィルター付きブロック内のテキストのアンチエイリアスをオフにします
• IEの影は他のブラウザーの影と形状が異なります（より正方形）
• AlphaImageLoaderはこうして作成されたブロック内で動作しなくなります（他のフィルターもチェックしなかったのかもしれません）

最後の例 。



それだけです ご清聴ありがとうございました。