左右方框陰影不起作用

我想在左右兩側製作箱形陰影，但箱子頂部總是有陰影，我已經多次檢查了我的代碼。左右方框陰影不起作用

#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

謝謝你的回覆！看起來很棒！ –

左右方框陰影不起作用

回答

相關問題