43

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

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

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

ドロップシャドウ（1px 1px 1px #cdcdcd）をborder-topにのみ適用したい。

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

編集

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

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);
}

ただし、影はパディングの影響を受けているようです。パディングを調整せずに、シャドウを境界線だけにアタッチする方法はありますか？

4

7 に答える 7

74

このようなもの？

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>

于 2012-03-20T18:40:04.997 に答える
3

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

于 2012-03-20T18:41:00.803 に答える
2

複数のボックスシャドウが私のためにそれをしました。

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/

于 2014-05-08T17:37:15.787 に答える
2

これらのインタラクティブなツールを使用すると、何が起こっているか、何が可能かを視覚化するのに役立ちます

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

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

http://css3generator.com/

編集：他のジェネレーターと組み合わせを試すための他のツールをチェックしてください。できるからといって、そうすべきだというわけではないことを時々思い出さなければなりません。夢中になりやすいのです。

于 2013-12-28T19:11:57.907 に答える
1 
.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;
}

私はそれのようなものを使用するようなものです。

于 2015-05-06T21:48:45.270 に答える