CSSは、divの4つの側面すべてを影にします

StackOverflow https://stackoverflow.com/questions/3467452

  •  28-09-2019
  •  | 
  •  

質問

私はCSSでこれを達成したい - すべてのブラウザによってサポートされたいので、CSS3ではなくCSS3bg with shadows on all sides

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

役に立ちましたか？

解決

Ventusが言ったように、IEでCSSシャドウを使用することはできません（IE9のみ）。ただし、使用できます Shadowon. 。それは素晴らしいjQueryプラグインであり、非常に使いやすいです。それにより、クロスブラウザの互換性があります。

他のヒント

Box ShadowはすべてのMordern [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以降からサポートされているボックスシャドウ。

css3pie IEでCSS3プロパティを使用できるツールです。

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

マークアップに関しては、たとえば、上部1つが右に浮かんでいる2つの要素だけが表示されます。余分な影を隠すには、Z-Indexで遊ぶ必要があります。そのサイトでは、非常によく似た効果もあります。ニーズに合わせて適応できるはずです。

これはすべてのブラウザで動作するはずです：

    .allSidesShadow {
        box-shadow: 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;

        /* For IE 5.5 - 7 */
        /* for IE4 - IE7 */
        filter:
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
        -ms-filter: "
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
        ";
    }

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で確認しました）。

box-shadow: inset 0 0 3px 0 #000;

平均0ピクセルの左、0ピクセル右、3pxぼけ、0ピクセル拡散、BGSよりわずかに暗い色を使用します。

私は今あなたの写真を見ることができませんが、すべてのサイドシャドウのために、私は以下のコードを使用します：

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

5pxの代わりにサイズを使用します。

いくつかの画像を作成する必要があります。左側用。右の1つ。 1つは下部などのために、いくつかのdivを持ち、それぞれの背景を設定します。

これらはすべて同じ（固定）幅であると仮定して、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;
}

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

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

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);

以下のラインは私のために働きました。寸法600x600の画像を使用しました。

-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top