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

Question

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

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

が、私は（1ピクセル1ピクセル1ピクセル#cdcdcd）ドロップシャドウをしたいのborder-topにのみ適用：

は例えば、私は、次のコードを持っています。

これを達成する最もよい方法は何ですか？

EDIT

これは私が

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

探しているものを、本質的であるしかし、影はパディングの影響を受けているようです。パディングを調整することなく、境界線だけに影を付けるにはどうしてですか？

Answer 1

これは何か？

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

http://jsfiddle.net/FrEnY/

Answer 2

簡単な答えは、あなたができないということです。 box-shadowは要素全体にのみ適用されます。別の方法を使用してCSSで:: beforeを使用すると、ヘッダのnavに1ピクセルの高要素を挿入し、その代わりにボックスの影を設定することができます。私はこれらの対話型ツールを使用して見つける

Answer 3

は何が起こっているか視覚化するのに役立ち、かついただきまし可能

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

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

http://css3generator.com/

編集：他の発電機で実験のための他のツールをチェックおよび組み合わせ。私は時々自分に思い出させる必要があります。なぜなら、できることは、あなたがすべきことではないということです。

Answer 4

複数のボックスシャドウが私にそれをしました。あなたは要素（inset）の内側に影を適用したいだけあなたは「スプレッド」に負の値を定義することができ、それは1つの側面に表示したい場合には

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/

Answer 5

パラメータ（2番目の例では5番目のパラメータ）。

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

また、次のようにy位置（第2の例では3番目のパラメータ）にオフセットを追加することを忘れないでください：

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

次のようになります。http://jsfiddle.net/FrEnY/1282/：

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

は、この更新されたフィドルをチェックここのボックスシャドウパラメータについては、http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Answer 6

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

私はそれのためにそれのようなものを使用するのが好きです。