如何用純CSS3繪製逼真的平滑狹縫陰影？

Question

如何使用純CSS製作如下所示的陰影效果？

我是新來的CSS。 以下是我到目前爲止所嘗試的，但我無法接近我想要的。請告訴我如何讓它看起來像圖像中的陰影？謝謝！

box-shadow: 1px 1px 5px #999999 inset 

Answer 1

這是我可以得到的最接近的：Demo。我認爲這其實並不壞。

它結合了黑色的陰影和白色的在它的上面。

.yourclass{ 
    background-color: #fff; 
    box-shadow: -15px 0px 60px 25px #ffffff inset, 
     5px 0px 10px -5px #000000 inset; 
} 

瀏覽器的陰影平滑可能會有所不同。我使用的是Chrome，因此您可能需要剔選這些值以獲得跨瀏覽器的視覺效果...

閱讀CSS Tricks article about box-shadows以瞭解它們的使用方式。

對於兩個黑影（兩側），你需要4個陰影（demo）：

結果：

.yourclass{ 
    background-color: #fff; 
    box-shadow: 0px 100px 50px -40px #ffffff inset, 
     0px -100px 50px -40px #ffffff inset, 
     -5px 0px 10px -5px rgba(0,0,0,0.5) inset, 
     5px 0px 10px -5px rgba(0,0,0,0.5) inset; 
} 

小心，瀏覽器的陰影渲染/平滑可能差別很大，。我使用鉻，所以你可能需要tweek的值來獲得一個跨瀏覽器的視覺效果......

有關CSS陰影的詳細信息，請閱讀這篇文章從CSS Tricks

Answer 2

你需要的是基本在頁面捲曲陰影的對面。看看this tutorial - 你應該能夠很容易地適應它。

下面是一個例子：jsFiddle

div { 
    position: relative; 
    width: 250px; 
    height: 150px; 
    margin: 100px auto; 

    border: 1px solid black; 
    background-color: white; 
} 

div:after { 
    position: absolute; 
    height: 80%; 
    width: 10px; 
    content: " "; 
    right: 0px; 
    top: 10%; 
    background: transparent; 
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3); 
    z-index: -1; 
} 

我們插入一個僞元素，其定位我們的DIV下方，並讓它蒙上了一層陰影。這樣，您可以控制陰影的高度和位置。