2

私はデザイン/プログラミングの世界に不慣れなので、問題は簡単に解決できると確信しています. moz-box-shadow エフェクトをヘッダーに追加しようとしています。しかし、そのコンポーネントを追加するとすぐに、スペースを占有しているヘッダーが水平方向に短くなります。ヘッダーは Twitter のように、シャドウ効果を使用するようにしたいと考えています。

#header {
    background-color: #990000;
    width:101.3%;
    margin-left:-8px;
    margin-top:-8px;
    height:40px;
    -moz-box-shadow: 1px 1px 10px #D7D7D7;
}

また、幅を設定した方法は、クロスブラウザの問題を引き起こす可能性がありますか?

4

3 に答える 3

4

これは Twitterにあるものと似たバージョンです:
これは多かれ少なかれ Twitter のバージョンです:

ライブデモ(編集)

HTML:

<div id="top-fixed">
    <div id="top-bar"></div>
</div>

CSS:

html, body {
    margin: 0; padding: 0
}
body {
    padding-top: 50px;
    background: #c0deed
}
#top-fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}
#top-bar {
    height: 40px;
    width: 100%;

    background-color:#00a0d1;
    background-image:-webkit-gradient(linear,0 0,0 100%,from(#00a0d1),to(#008db8));
    background-image:-moz-linear-gradient(#00a0d1,#008db8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8');
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a0d1',endColorstr='#008db8')";

    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
于 2011-02-09T22:25:45.960 に答える
2

Twitter が使用しているトリックは、絶対配置ボックスを配置し、そのボックスに 100% の幅と影を与えることです。その親で使用overflow-x: hiddenすると、探している効果が得られます。

于 2011-02-09T23:16:01.933 に答える
1

私は.pngで影をつけてきました。これを使用するメリットはありません (特に、ブラウザがボックス シャドウをサポートする前に .png のサポートを開始したと想定しているため、たとえば、FF が FF3.5でボックス シャドウのサポートを開始したという Mozilla の声明を参照してください)。もちろん、これが.png 経由でシャドウを作成するよりも優れているので、遠慮なくコメントを残して、私が間違っていることを証明してください!

于 2011-02-10T07:43:41.653 に答える