css - 0であっても、水平方向のボックスシャドウを削除します

Question

ボックスシャドウの水平方向の値を0に設定しても、divにプラスの幅が与えられます。要素の幅がわからない場合や100％に設定されている場合、どうすればこれらの余分なピクセルを取り除くことができますか？

CSSクリッププロパティを使用するこのメソッドを見つけましたが、要素の幅がピクセル単位でわかっている場合にのみ機能します。

jquery / javascriptを使用してピクセルを計算し、その値を使用することもできますが、もっと簡単なものがあると確信しています。

ありがとう。

Answer 1

ラッパーを追加し、フロートしてから設定する必要がありますoverflow: hidden。

#wrapper {
  float: left;
  margin: 50px;
  padding: 0 20px;
  overflow: hidden;
}

これがデモです http://jsfiddle.net/n8LWF/

Answer 2

W3Cはあなたに答えを与えます

<shadow> = inset? && [ <length>{2,4} && <color>? ]
...
The fourth length is a spread distance. Positive values cause the shadow shape to expand in all directions by the specified radius. Negative values cause the shadow shape to contract.

http://www.w3.org/TR/css3-background/#the-box-shadow

ボックスシャドウには4つのプロパティがあります。そしてこのようにあなたは3つの側面だけに影を持つことができます：

box-shadow: 0 5px 20px -5px black;