左右方框阴影不起作用

我想在左右两侧制作箱形阴影，但箱子顶部总是有阴影，我已经多次检查了我的代码。左右方框阴影不起作用

#box { 
 
    margin: 0 auto; 
 
    margin-top: 0px; 
 
    border: 1px solid #ffffff; 
 
    border-top-color: #e99f2e; 
 
    overflow: hidden; 
 
    box-shadow: 2px 0 20px 2px #7f7e7f, -2px 0 20px 2px #7f7e7f; 
 
}

<div id="box"></div>

来源

2017-06-14 William Li

可能的重复[如何获取左侧和右侧的方块阴影]（https://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-只） – sol

先了解box-shadow，然后得到的方便，在任何方面应用的box-shadow，你有计划设计的syntax，

syntax - 
box-shadow : offset-x | offset-y | blur-radius | spread-radius | color

#box { 
 
    margin: 0 auto; 
 
    margin-top: 0px; 
 
    overflow: hidden; 
 
    box-shadow: -10px 0 2px -2px #7f7e7f, 10px 0 2px -2px #7f7e7f; 
 
    height: 150px; 
 
    width: 50%; 
 
    background:#cff; 
 
    margin-top:20px; 
 
}

<div id="box"></div>

来源

2017-06-14 15:59:28 frnt

谢谢帮助很多！ –

欢迎@ W.J :-) – frnt

然而，它不会在我的数据工作：-2px 0 20px -2px＃7f7e7f一旦模糊半径变成20px，所有的一面都会有阴影。那么能帮助我吗？ –

有实际上是一个黑客。

您可以通过添加一个“空的”顶部和底部阴影来实现此目的。

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(30, 53, 125, 0.9), -12px 0 15px -4px rgba(30, 53, 125, 0.9);

来源

2017-06-14 15:42:15

感谢您的分享！ –

如果你设置了spread到blur参数的负你可以达到这个效果。对于左侧方框阴影，将position设置为负数blur，将右侧方框阴影设置为position，将其设置为正数blur。我在这个演示中使用20px：

#box { 
 
    margin: 0 auto; 
 
    margin-top: 40px; 
 
    border: 1px solid #ffffff; 
 
    border-top-color: #e99f2e; 
 
    overflow: hidden; 
 
    width: 150px; 
 
    height: 150px; 
 
    box-shadow: 20px 0px 20px -20px #7f7e7f, -20px 0px 20px -20px #7f7e7f; 
 
}

<div id="box"></div>

退房this CSS Box-shadow generator进一步探讨。

来源

2017-06-14 15:45:48

谢谢你的帮助！ –

然而，它不会在我的数据工作：-2px 0 20px -2px＃7f7e7f一旦模糊半径变成20px，所有的一面都会有阴影。可以帮助我吗？ –

第一个和最后一个值应该是-20px，而不是-2px –

我不认为这是好的其他答案，但这是一个替代方法使用绝对定位伪元素与阴影。

.lr-shadow { 
 
    background:#fff; 
 
    border: 1px solid #fff; 
 
    border-top-color: #e99f2e; 
 
    width:100%; 
 
    max-width:500px; 
 
    height:200px; 
 
    position:relative; 
 
    margin:0 auto; 
 
} 
 
.lr-shadow:before, .lr-shadow:after { 
 
    box-shadow: 0 0 20px 2px #7f7e7f; 
 
    content:" "; 
 
    position:absolute; 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    height:90%; 
 
    z-index:-1; 
 
} 
 
.lr-shadow:before { 
 
    left:5px; 
 
} 
 
.lr-shadow:after { 
 
    right:5px; 
 
}

<div class="lr-shadow"></div>

来源

2017-06-14 15:58:42 WizardCoder

谢谢你的回复！看起来很棒！ –

左右方框阴影不起作用

回答

相关问题