0

次のコードを試して、その下にボックスの影がある改行を作成しました。境界線の下部は正常に機能しますが、影は表示されません。コンテンツがあれば問題なく動作しますが、可能であれば空にしようとしています。

<div class="break"></div>

.break{
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid $txt;
    box-shadow:0 1px 1px $shadow;
    box-shadow: 0 20px 20px -20px $shadow;
}
4

4 に答える 4

2

編集：

次のように div にマージンを追加します。margin: -50px auto 10px;

更新されたフィドル

.break{
    width: 90%;
    height: 50px;
    margin-top: -20px;
    border-bottom: 1px solid #1f1209;
    box-shadow: 0 20px 20px -20px #333;
    margin: -50px auto 10px;
}

これが必要なものだと思います：

フィドル

.break{
    width: 100%;
    float: left;
    clear: both;
    margin: 20px 0;
    border: 1px solid red;
    box-shadow: 0 5px 5px #333;

}
于 2013-07-18T22:49:51.350 に答える
0

ボックス シャドウ (なぜ 2 つあるのですか?) の負の広がりが大きすぎます。-5 以下の値で試してください。box-shadow: 0 20px 20px -5px rgba(100,100,100,0.4)私にとってはうまくいきます。

于 2013-07-18T22:49:29.983 に答える
0

2 つのボックス シャドウがあったと思いますが、最も重要なのは、オフセットで 0 を宣言したことです。私はフィドルでこれを試しました: js fiddle test

.break{
    width: 100%;
    float: left;
    clear: both;
    margin: 0 0 20px 0;
    padding: 0 0 0px 0;
    border-bottom: 1px solid #000; 
    box-shadow: 5px 7px 7px #aaa;
    /*box-shadow: 5px 20px 20px -20px #ddd;*/
        height:1px;
        line-height:1px;
}

注: パディングの代わりに高さと行の高さを追加します。

于 2013-07-18T22:50:02.903 に答える
0

div 内のコンテンツの結果が気に入った場合は、div に 1 つのノーブレーク スペースを入力できます。そのようです：<div>&nbsp;</div>

于 2013-07-19T00:13:29.627 に答える