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

如果您喜欢 div 中包含内容的结果，则可以使用单个 no-break-space 填充 div。像这样：<div>&nbsp;</div>

于 2013-07-19T00:13:29.627 回答
0

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

于 2013-07-18T22:49:29.983 回答
0

我认为您有 2 个 box-shadow，但最重要的是您在偏移量上声明了 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 回答