11

すべてのブラウザーでサポートされるようにしたいので、CSS3 ではなく CSS でこれを実現したい 四方に影のある背景

つまり、コンテンツを含む div で、四方に影があります。上部の領域はナビゲーションに使用されます。チュートリアルを検索しましたが、これまでのところ役に立ちません。ヘルプ！

4

11 に答える 11

18

Box Shadow はすべての最新の [IE>8] ブラウザーで動作します。このコードは画像を使用せず、IE バージョン 9 未満のすべてのブラウザーで動作します。

 box-shadow:2px 2px 10px 10px #C9C9C9;
 -webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
 -moz-box-shadow:2px 2px 10px 10px #C9C9C9;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);

ボックス シャドウは IE 9 以降でサポートされています。

于 2011-10-25T10:58:27.633 に答える
4

CSS3pieは、IE でいくつかの css3 プロパティを使用できるようにするツールです。

あなたがしようとしているのは、新しいブラウザーでかなり普及している css3 であり、そこからダウンロードできる .htc ファイルを使用して IE で非常にうまく (そして簡単に) エミュレートされます。

マークアップに関しては、2 つの要素しか表示されず、たとえば、一番上の要素が右に浮かんでいます。余分な影を隠すには、z-index をいじる必要があります。そのサイトにも非常によく似た効果があり、ニーズに合わせて調整できるはずです。

于 2010-08-12T12:30:54.000 に答える
3

これはすべてのブラウザーで機能するはずです。

    .allSidesShadow {
        ボックスの影: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;

        /* IE 5.5 ～ 7 の場合 */
        /* IE4 ～ IE7 の場合 */
        フィルター：
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=1、色=#C4C4C4)、
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=90、色=#C4C4C4)、
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=180、色=#C4C4C4)、
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=270、色=#C4C4C4);
        -ms-フィルター: "
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=1、色=#C4C4C4)、
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=90、色=#C4C4C4)、
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=180、色=#C4C4C4)、
            progid:DXImageTransform.Microsoft.Shadow(強度=9、方向=270、色=#C4C4C4)
        ";
    }
于 2011-08-03T00:27:37.193 に答える
1

Ventusが言ったように、ie（ie9のみ）でcssシャドウを使用することはできません。ただし、shadowOnを使用できます。これは優れた jquery プラグインであり、非常に使いやすいです。これにより、ブラウザ間の互換性が確保されます。

于 2010-08-12T12:48:32.133 に答える
1

I cant see your picture now, but for all side shadows I use the below code:

box-shadow: 0 0 5px 0 #000;

Instead of the 5px use your size.

于 2014-09-20T13:26:55.360 に答える
1 
box-shadow: inset 0 0 3px 0 #000;

左 0 ピクセル、右 0 ピクセル、ぼかし 3 ピクセル、拡散 0 ピクセルを意味し、BG よりもわずかに暗い色を使用します。

于 2014-08-14T18:38:44.363 に答える
1

Sekar が投稿した回答には、少し編集が必要です。

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

これはIEでは機能しません（IE8で確認しました）。

于 2012-07-20T06:08:09.487 に答える
0

次のコードを div に配置して、4 つの側面すべてに影を落とすことができます。

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);
于 2015-10-03T08:39:31.313 に答える
0

複数のイメージを作成する必要があります。左側用。右用の 1 つ。1つは下などです。次に、いくつかのdivを持ち、それぞれの背景を設定します。

于 2010-08-12T12:13:21.853 に答える
0

すべて同じ (固定) 幅であると仮定すると、3 つの div でこれを行うことができます。

<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>

.top{
  background:url('top.png');
  height:20px;
  width:800px;
}
.middle{
  background:url('middle.png') repeat-y;
  width:800px;
  }
.bottom{
  background:url('bottom.png');
  height:20px;
  width:800px;
}
于 2010-08-12T12:20:52.527 に答える
0

または、1 つの大きな画像を作成し、それをコンテンツ領域全体の背景として使用することもできます。次に、含まれる要素の位置とサイズをハードコーディングします。

于 2010-08-12T12:21:49.727 に答える