html - インセットではなく、div の端を横切ってドロップ シャドウを作成する方法

Question

これは私には理解できない超単純な問題です。

ドロップ シャドウを div の下部全体に適用したいと考えています。そのままで、底のほとんどをカバーします。

コードは次のとおりです。

box-shadow: 0px 20px 15px -15px rgba(0, 0, 0, 0.49)

影が両側をずっと横切る必要があります。

ありがとう

編集：私はこれについて間違っていますか？他の CSS プロパティを使用する必要がありますか?

Answer 1

絶対に配置された、元のdivよりも大きい追加のdivを使用するという解決策があります。ここで実際の例を参照してください：http：//jsfiddle.net/martinschaer/MHs5R/

<div class="container">
    <div class="content"></div>
    <div class="shadow"></div>
</div>

そしてdeCSS：

.container{
    position: relative;
    background-color: #f0f0f0;
    padding: 20px;
}

.content{
    height: 200px;
    width: 200px;
    background-color: #fff;
}

.shadow{
    -webkit-box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    box-shadow:  0px 20px 15px -15px rgba(0, 0, 0, 0.49);
    position: absolute;
    top: 20px; /* .container top padding */
    left: 13.5px; /* 20 - (15/2) = .container left padding - (shadow spread / 2) */
    width: 215px; /* .content width + shadow spread */
    height: 200px;
}​

Answer 2

トップシャドウを回避するには、垂直オフセットを追加し、それに応じて他のパラメータを調整します。さらに、広がり距離を0以上に設定すると、水平方向の境界線が覆われます。

これから始めましょう：

box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.49)

水平方向の境界線全体がカバーされていない場合は、見栄えが良くなるまで4番目の値を少し増やします。必要に応じて、それに応じて垂直オフセットも調整します。

実際のボックスのhtml/cssも確認すると便利です。

Answer 3

結果は次のとおりです。

dabblet.com のデモ

CSS:

div {
    background-color: #FFF;
    border: 1px solid #888;
    width: 100px;
    height: 100px;
    box-shadow: 0px 10px 5px -2px #888 ;
}

Answer 4

box-shadow のパラメーターは、次の順序になっています:
水平方向のオフセット、垂直方向のオフセット、ぼかし距離、影の広がり距離、色の値

必要なのはこれだと思いますbox-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.49)

これがフィドルです - http://jsfiddle.net/ashwyn/Cbqej/1/