如何在重複框的左側和右側創建箱形陰影？

我試圖找到解決方案如何使用箱子陰影顯示陰影和盒子上的框。我在底部的問題陰影看起來更黑，然後左右。如何在重複框的左側和右側創建箱形陰影？

如果任何人有解決方案，請給予幫助。謝謝。

.box { 
 
    \t margin:0; 
 
    \t box-shadow: 0px 12px 15px 0 #7f7e7f, 0px 7px 2px -1px #7f7e7f; 
 
    \t height: 150px; 
 
    \t width: 50%; 
 
    \t background: #cff; 
 
    }

<div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div>

來源

2017-08-31 Vuthy Sok

你需要做的是利用兩個不同的盒子陰影。一個用於左側，另一個用於右側。這兩個盒子陰影應該用逗號分隔。

第一個陰影應該有一個負的水平寬度，第二個陰影應該有一個正的水平寬度。這是box-shadow速記中的第一個值。

.box { 
 
    margin: 0; 
 
    box-shadow: -10px 0px 0px 0 #7f7e7f, 10px 0px 0px 0 #7f7e7f; 
 
    height: 150px; 
 
    width: 50%; 
 
    background: #cff; 
 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

希望這有助於！ :)

來源

2017-08-31 03:13:26

是的正確，但可以陰影是模糊的 –

以下是代碼。希望這是一個很大的幫助:)

.box { 
 
    margin: 0; 
 
    box-shadow: -10px 0px 0px 0 rgba(0,0,0,0.2), 10px 0px 0px 0 rgba(0,0,0,0.2); 
 
    height: 150px; 
 
    width: 50%; 
 
    background: #cff; 
 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

來源

2017-08-31 03:28:10 bellabelle

陰影是分開的不喜歡看一個框 –

我已經修改我的CSS，然後添加模糊陰影的顏色，我用rgba（），所以我可以添加不透明 – bellabelle

rgba（0 ，0,0,0.2） - 三個零代表黑色的顏色值，最後一個零代表黑色的不透明度值 – bellabelle

您可以簡單地使用Box-Shadow generator，這是相當簡單和快速使用

例子：

.box { 
 
    margin: 0; 
 
    box-shadow: -24px 11px 60px -22px rgba(0, 0, 0, 1), 24px 11px 60px -22px rgba(0, 0, 0, 1); 
 
    height: 150px; 
 
    width: 50%; 
 
    background: yellow; 
 
}

<div class="box"></div> 
 
<div class="box"></div> 
 
<div class="box"></div>

來源

2017-08-31 10:04:02

如何在重複框的左側和右側創建箱形陰影？

回答

相關問題