web-dev-qa-db-ja.com

CSS3ボックスシャドウ（上部、左側、右側のみ）

ご挨拶、

CSS3ボックスシャドウを、次のCSSの結果に一致する半径を持つDIVの上部、右側、および左側のみに適用しようとしています（マイナスボトムシャドウ）

 #div {
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

これを達成する最良の方法は何でしょうか？

ありがとう！

[〜＃〜] update [〜＃〜]このシャドウはページ上のナビゲーションバーに適用され、バーは上部に配置されますメインコンテナDIV。私が成し遂げようとしているのは、メインDIVのボックスシャドウを、ナビゲーションバーの上にありますが、ナビゲーションバーの上に下の影がないナビゲーションバーに続けることです。 サイト自体 を見て、ここですべてのHTMLとCSSを追加するよりも簡単に、私が話していることを確認してください。

UPDATE 2私が作業しているDIVは、各nav liに影を付けるのではなく、特異であるため、次のように変更することにしました。 ：

-webkit-box-shadow: 0px -4px 7px #e6e6e6;
    -moz-box-shadow: 0px -4px 7px #e6e6e6;
    box-shadow: 0px -4px 7px #e6e6e6;

これにより、影の上部が非常に目立つようになりますが、それは私が達成しようとしていることです-コンテナDIVの影の外観を同じに保つ方法を誰かが知っているなら、私に知らせてください。ありがとう！

css3
44
NightMICU

下の部分を別のdivで覆うだけで、ボード全体で一貫したドロップシャドウが得られます。

#servicesContainer {
  /*your css*/
  position: relative;
}

そしてそれは修正されました！魔法みたい！

18
methodofaction

スプレッド値を使用...

box-shadowには次の値があります

box-shadow: x y blur spread color;

のようなものを使用できます。

box-shadow: 0px -10px 10px -10px black;

UPDATE：私は jsfiddle を追加しています

26
Orlando

box-shadow propertyに複数の値を与えることができます
例えば

-moz-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
-webkit-box-shadow: 0px 10px 12px 0px #000,
                    0px -10px 12px 0px #000;
box-shadow: 0px 10px 12px 0px #000,
            0px -10px 12px 0px #000;

左および右にのみドロップシャドウであり、要件に合わせて調整できます

14
Artur Keyan

「：after」で影を覆う方法を見つけました。私のコードは次のとおりです。

#div:after {
    content:"";
    position:absolute;
    width:5px;
    background:#fff;
    height:38px;
    top:1px;
    right:-5px;
}
7
yichengliu

次のコードは、右側の影のインセットを作成しました：

-moz-box-shadow: inset -10px 0px 10px -10px #000;
-webkit-box-shadow: inset -10px 0px 10px -10px #000;
box-shadow: inset -10px 0px 10px -10px #000;

それが役立つことを願っています!!!!

4
Ya Basha

私はこれが非常に古いことを知っていますが、これらの答えはどれも私を助けてくれなかったので、私の答えを追加しています。これは、@ yichengliuの答えのように、疑似::after要素。

#div {
    position: relative;
}



#div::after {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    height: 100%;
    z-index: -1;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
}

/*or*/

.filter.right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: white;
    z-index: -1;

    -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1));
}

フィドル

ドロップシャドウのXを変更する場合（drop-shadow または box-shadow）、幅を変更すると、divと影の間に白い隙間があるように見えないようになります。

ドロップシャドウのYを変更する場合（drop-shadow または box-shadow）、高さを変更すると、上記と同じ理由で役立ちます。

1
Jaketr00

私は同じ問題を抱えていて、これを解決するための考えを探していました。

私はすでにタブ用にいくつかのCSSを用意しており、これが私にとってうまくいったことです：

（特にpadding-bottom: 2px;内部#tabs #selected a {。下部が非表示box-shadowきちんと、次のCSSで私にとってはうまくいきました。）

#tabs {
    margin-top: 1em;
    margin-left: 0.5em;
}
#tabs li a {
    padding: 1 1em;
    position: relative;
    top: 1px;
    background: #FFFFFF;
}
#tabs #selected {
    /* For the "selected" tab */
    box-shadow: 0 0 3px #666666;
    background: #FFFFFF;
}
#tabs #selected a {
    position: relative;
    top: 1px;
    background: #FFFFFF;
    padding-bottom: 2px;
}
#tabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#tabs li {
    float: left;
    border: 1px solid;
    border-bottom-width: 0;
    margin: 0 0.5em 0 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

SO。

1
Mikolaj

根本的に異なるため、個別の回答を追加します。

Rgbaを使用し、アルファチャネルを低く設定して（透明度を得る）、ドロップシャドウを目立たなくすることができます。

このようなものを試してください（.5で遊んでください）

-webkit-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
-moz-box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);
box-shadow: 0px -4px 7px rbga(230, 230, 230, .5);

お役に立てれば！

1
jdhartley
#div:before {
 content:"";
 position:absolute;
 width:100%;
 background:#fff;
 height:38px;
 top:1px;
 right:-5px;
}
0
Ravi Bhoraniya