web-dev-qa-db-ja.com

ドロップシャドウをボーダートップにのみ適用しますか？

ドロップシャドウを特定の境界エッジにどのように適用しますか？

たとえば、次のコードがあります。

header nav {
    border-top: 1px solid #202020;
    margin-top: 25px;
    width: 158px;
    padding-top:25px;
}

ボーダートップにのみドロップシャドウ（1px 1px 1px #cdcdcd）を適用したい。

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

編集

これは基本的に私が探しているものです

div {
    border-top: 1px solid #202020;
    margin-top: 25px;
    margin-left:25px;
    width: 158px;
    padding-top:25px;
    -webkit-box-shadow: 0px 1px 1px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 1px 1px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 1px 1px rgba(50, 50, 50, 0.75);
}

ただし、影はパディングの影響を受けるようです。とにかく、パディングを調整せずに単独で境界に影を付けることはできますか？

cssborderdropshadow
25
AMC

このようなもの？

div {
  border: 1px solid #202020;
  margin-top: 25px;
  margin-left: 25px;
  width: 158px;
  height: 158px;
  padding-top: 25px;
  -webkit-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
  box-shadow: 0px -4px 3px rgba(50, 50, 50, 0.75);
}
<div></div>
41
danblundell

要素（inset）の内側に影を適用したいが、片側にのみ表示したい場合は、 "spread"パラメーターに負の値を定義できます（2番目の5番目のパラメーター例）。

完全に削除するには、シャドウブラーと同じサイズ（2番目の例では4番目のパラメーター）にしますが、負の値にします。

また、y位置（2番目の例の3番目のパラメーター）にオフセットを追加して、次のことを忘れないでください。

box-shadow:         inset 0px 4px 3px rgba(50, 50, 50, 0.75);

になる：

box-shadow:         inset 0px 7px 3px -3px rgba(50, 50, 50, 0.75);

この更新されたフィドルを確認してください： http://jsfiddle.net/FrEnY/1282/ およびここでのbox-shadowパラメーターの詳細： http://www.w3schools.com/cssref/ css3_pr_box-shadow.asp

8
dnlmzw

簡単な答えは、できないということです。 box-shadowは要素全体にのみ適用されます。別のアプローチを使用し、CSSで:: beforeを使用して、ヘッダーnavに高さ1ピクセルの要素を挿入し、代わりにbox-shadowを設定できます。

3
Ben Clayton

複数のボックスシャドウがそれを実現してくれました。

box-shadow:
        inset 0 -8px 4px 4px rgb(255,255,255),
        inset 0 2px 4px 0px rgba(50, 50, 50, 0.75);

http://jsfiddle.net/kk66f/

1
shaunw

これらの対話型ツールを使用すると、何が起こっているのか、何が可能かを視覚化することができます

http://css3gen.com/box-shadow/

http://www.cssmatic.com/box-shadow

http://css3generator.com/

編集：他のジェネレーターと組み合わせを試すための他のツールをチェックしてください。あなたができるからといって、そうすべきだとは限らないことを忘れないでください-夢中になるのは簡単です！

1
shipwreck
.item .content{
    width: 94.1%;
    background: #2d2d2d;
    padding: 3%;
    border-top: solid 1px #000;
    position: relative;
}
.item .content:before{
      content: "";
      display: block;
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: 1px;
      -webkit-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      -moz-box-shadow: 0px 1px 13px rgba(255,255,255,1);
      box-shadow: 0px 1px 13px rgba(255,255,255,1);
      z-index: 100;
}

私はそのようなものを使用しているようなものです。

0
Arthur Yakovlev