0

私が取り組んでいるワードプレス サイトがあり、CSS3 ドロップ シャドウを 4 つの要素に追加する必要があります。content-menu-wrapper は、他の div から独立しており (グラフィカルに接続されていません)、機能します。

次の div は content wrapper、footer、footer-bottom です。各 div は、上下にグラフィカルに「接続」されています。コンテンツ ラッパーには、上下左右に影が必要です。フッターには左右に影が必要です。フッター下部には、左、右、および下に影が必要です。

影を編集して「テスト」しようとすると、影が消えてしまいます。ほとんどの場合、コードを間違って使用しています。以下は content-menu-wrapper の機能コードです。

CSS :

#content-menu-wrapper
{
    background-color: white;
    margin:0px auto 15px auto;
    height: 32px;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

他の 3 つの div のコードを教えてください。ありがとうございました。

4

3 に答える 3

3

左と右は簡単です：

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

ただし、上記の手法を使用すると角に隙間ができるため、3 つの側面をきれいに見せるのは非常に困難です。

私の提案は、すべての要素をラッピング div で囲み、それに適用するbox-shadowことです。CSS をよりクリーンに保ち、実行しやすくします。

于 2013-02-12T02:34:15.010 に答える
0

このオンラインツールを使用して、divのシャドウのcssを取得します。

于 2013-02-12T02:15:11.333 に答える
0

上記のjimjimmyの回答に従って、コンテンツとフッターのdivをより大きなdivにラップすることで、この問題を解決できました。詳細は次のとおりです。まず、common.css に新しい div ID「content-shadow」を作成しました。

次に、コンテンツ ラッパー div から box-shadow 属性と copy/paste 属性を追加して、サイトが正しくフォーマットされるようにしました。私の場合、次のようになりました。

#content-shadow {

    border-left:0px solid #E7E7E7;
    border-right:0px solid #E7E7E7; 
    border-bottom:0px solid #E7E7E7;
    border-top:0px solid #E7E7E7;
    background-color:#FFFFFF;
    margin:0px auto 0px auto;
    margin-bottom:0px;
    margin-top:0px;
    width: 1000px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

次に、テーマの header.php ファイルの「content-wrapper」div の前に div を配置しました。そのファイルを保存して、footer.php ファイルに移動し、ファイルの末尾の適切な場所にタグを配置しました。私にとって、これは「content-bottom-empty-space」divの上にあったので、サイトの下部に少しスペースを空けることができました.

ファイルを保存すると、ワードプレス全体に伝播する/伝播するはずです。これが何らかの形で誰かに役立つことを願っています。

于 2013-02-12T15:19:19.713 に答える