Question

我已经尝试了以下代码来创建一个下面有框阴影的换行符。边框底部工作正常，但没有阴影出现。如果我有内容，我的工作正常，但如果可能，我试图让它变空。

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

Answer 1

修改

为您的div添加一个保证金，如下所示：margin: -50px auto 10px;

UPDATED FIDDLE

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

我认为这就是你所需要的：

<强> FIDDLE

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

Answer 2

你的盒子阴影（为什么你有两个？）上有太大的负面传播。尝试使用值-5或更小的值。 box-shadow: 0 20px 20px -5px rgba(100,100,100,0.4)对我来说很好。

Answer 3

我认为你有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;
}

注意：添加高度和行高而不是填充;

Answer 4

如果您喜欢div中内容的结果，则可以使用单个无中断空间填充div。像这样：<div> </div>

是否可以创建和清空div（作为换行符）并为其提供边框底部和底部框阴影

4 个答案: