特殊的CSS陰影框＆|其他解決方法

Question

我在寫一些HTML/CSS，我需要創建一個特殊的陰影，其高度爲div的自定義寬度&。

什麼是最好的辦法呢？現在，我一直試圖使用兩個重疊box-shadow的，但我找不到一種方法使它看起來像圖像。

我知道我可以創建兩個div，並通過指定自定義高度和其他東西來拍打它們，但我想知道是否有更簡潔的css方法。

Answer 1

您可以將其用於box-shadow。我不確定是否要顯示綠色欄。所以我把它放下了。

中有箱陰影，往往是從未使用過擴散半徑選項：

/* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 60px 0 0 -30px #ccc;

在這種情況下，你會爲​​了達到你想要的效果這個設置半徑爲負。對相反方面做同樣的事情，它應該工作。

div{ 
 
    background: cyan; 
 
    position: relative; 
 
    height: 600px; 
 
    width: 400px; 
 
    margin: 50px auto; 
 
    box-shadow: 
 
    60px 0 0 -30px #ccc, 
 
    -60px 0 0 -30px #ccc; 
 
}

<div></div>

另一種選擇是使用:before或:after假點