2

さまざまなページ要素（ボックス、入力など）にドロップシャドウがある新しいサイトを構築しています。サイト全体は、すべてのブラウザーで同じである必要があります（IE7に戻る）。

私の問題は、新旧のブラウザのさまざまな要素にこれらのドロップシャドウを実装するための最良の方法にあります。

ここに画像の説明を入力してください

私は画像のないcss3ソリューションを知っています：box-shadow: 1px 1px #333-しかし、これはうまく劣化しません。

要素ごとに4つの画像を表示するため、すべての要素に画像を使用する必要はありません。サーバーへのリクエストとページの読み込み時間は、単純な効果のためだけにばかげています。

フォールバックを作成することも可能ですか：ブラウザがボックスシャドウをサポートしていない場合は、画像を使用しますか？これに関して私が目にする唯一の問題は、管理を困難にする可能性のある多くの余分なマークアップです。

ここでの難しさは、「モダンにしたいが、うまく劣化する」という要件だと思います。
ドロップシャドウを実装する場合、どのソリューションが最適ですか（代替手段はありますか）？

4

4 に答える 4

4

http://modernizr.comを使用して、現在のユーザーがcss3をサポートするブラウザーを使用しているかどうかを検出できますが、ドロップシャドウ付きのボックスを作成するには古い方法を使用する方がよいと思います。

ボックスの上部と下部に「引き戸」のテクニックを使用して作成し、ボックス自体に別の背景画像を使用できます。

とにかくCSS3pie（http://css3pie.com/）を使用できますが、このプラグインは時々少しバグがあり、必要なブラウザーのパフォーマンスを上げるため、通常は好きではありません。

于 2012-11-20T14:48:29.970 に答える
3

あなたはcssを使用してみることができます

filter: progid:DXImageTransform.Microsoft.Shadow(...);

しかし、この影はひどいです。最善の解決策は、ボックスシャドウを許可する最新のブラウザでのみシャドウを表示することだと思います。

于 2012-11-20T14:40:37.373 に答える
1

ねえ、Javascriptで確認できます

var supports = (function() {  
   var div = document.createElement('div'),  
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),  
      len = vendors.length;  
   return function(prop) {  
      if ( prop in div.style ) return true;  
      prop = prop.replace(/^[a-z]/, function(val) {  
         return val.toUpperCase();  
      });  
      while(len--) {  
         if ( vendors[len] + prop in div.style ) {  
            // browser supports box-shadow. Do what you need.  
            // Or use a bang (!) to test if the browser doesn't.  
            return true;  
         }  
      }  
      return false;  
   };  
})();  
if ( supports('textShadow') ) { 
   document.documentElement.className += ' textShadow';  
}

次に、画像を使用するelseステートメントを入力するか、Modernizer http://www.modernizr.com/というライブラリを使用して、古いブラウザがcss3タグを実装する方法を認識できるようにします。

コードのソースへのリンク：SOURCECODE

于 2012-11-20T14:36:42.063 に答える
0

IEの古いバージョンでは、次を使用できます。

/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

ここにMSDNの詳細とここに例

于 2012-11-20T14:37:14.203 に答える