web-dev-qa-db-ja.com

ボックスシャドウの上部のみを削除するにはどうすればよいですか？

border-radiusとbox-shadowを使用して、要素の周囲を光らせています。

box-shadowの上部のみを削除できますか？

実例

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

編集：この小さなものは問題です！ enter image description here

bordercss
26
Bakudan

これは機能しますが、より良い方法があるかどうか（またはラッパー要素を追加せずに可能かどうか）を知らないことを認めます。複数のbox-shadowsを使用するのは良い考えですが、同じように見せることはできません。

参照：http://jsfiddle.net/thirtydot/8qEUc/3/

HTML：

<div id="bla">
    <div> something </div>
</div>

CSS：

#bla {
    overflow-y: hidden;
    padding: 0 10px 10px 10px;
    margin: 0 -10px
}
#bla > div {
    /* the CSS from your question here */
}
11
thirtydot

ボックスシャドウを使用するので、擬似要素を使用して作成し、divの下に配置して、必要な部分のみが表示されるように配置できます。 http://jsfiddle.net/kL8tR/60/

重要な注意事項がいくつかあります。

  • 疑似要素にはz-index: -1が必要です
  • Div自体にはposition: relativeを含める必要があり、z-indexは含めないでください

擬似要素+ CSS3 =素晴らしさ:)

12
kizu

@milo;上枠ではなく、コードで指定するshadowです。

トップグローを削除するには、シャドウの垂直方向の間隔を定義する必要があります。

これをあなたのシャドウCSSに書いてください：

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

＆あなたはここから生成できます http://css3generator.com/

注：シャドウには4つのプロパティがありますhorizontal, vertical, blur & spread内側の影にはinsetを定義できます

8
sandeep

以下を試すことができます。私の方法はCSSのみを使用します。

リンクの例：http://jsfiddle.net/kL8tR/56/

div{
    margin-top: 25px;
    color: #fff;
    height: 45px;

    padding: 26px 24px 46px;

    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;

    -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);

}

基本的に私がやっていることは、マルチレイヤーシャドウを作成しているので、最初のシャドウが2番目のレイヤーをオーバーレイし、上部セクションをマスクしています。

これを以前に使用したことがありますが、これが私の参考資料です：

セクションの下を見てください-複数の影を重ねる[ http://www.css3.info/preview/box-shadow/ ]

1
Marc Uberstein

シャドウを下にシフトして（垂直方向の変位）、シャドウの半径を小さくすることができます（アスタリスクを必要なピクセル数に置き換えますjust上部のシャドウをボックス自体で覆う）：

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);
1
Lobabob

負のスプレッド半径を使用し、他のパラメータを調整して、希望する効果が得られるかどうかに合わせて調整します。

CSSボックスシャドウの負の半径の広がり

div {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  -webkit-box-shadow: 5px 5px 10px -6px black;
  -moz-box-shadow: 5px 5px 10px -6px black;
  box-shadow: 5px 5px 10px -6px black;
}
<div></div>
0
Matt C