是否可以在CSS3中創建類似的陰影？

Question

我幾乎可以肯定，它是不可能在CSS3創建這樣的陰影，但我請求，以防萬一有人嘗試，並找到了一個方法：

我有側邊欄的權利（有限的高度）和更長的內容左邊。陰影在開始時淡入淡出。這個影子可以純粹是程序性的嗎（完全沒有光柵圖像）？

Answer 1

您可以使用徑向漸變，像這樣：

#leftshadow 
{ 
    margin-left: 10px; 
    height: 200px; 
    width: 20px; 
    border-left:1px solid #ebebeb; 
    border-left:1px solid rgba(0,0,0,0.4); 
    background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.3)),to(rgba(0,0,0,0))); 
    -webkit-mask-box-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0))); 
    background-image:-moz-radial-gradient(left,ellipse farthest-side,rgba(0,0,0,.3),rgba(0,0,0,0)); 
}​ 

jsFiddle here

Different tweak is here

---

原來的答案

如果你需要一個「簡單」的插圖影子你也可以做到這一點，像這樣：

#leftshadow 
{ 
    -webkit-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4); 
    -moz-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4); 
    box-shadow: inset inset 5px 0px 5px -2px rgba(0,0,0,0.4); 
}​ 

jsFiddle here

Answer 2

.box { 
    z-index: 100; 
    border: none; 
    padding: 0 0 0 10px;  
    background-image: url("images/topShadow"), url('images/bottomShadow'), url('images/shadow'); 
    background-position: 0 top, left top, 0 bottom; 
    background-repeat: no-repeat, repeat-x, no-repeat; 
} 

確定這是未經測試，但應該有一些調整，我沒有時間工作因爲目前。你有3個圖像，頂部，中部和底部。您可以使用CSS3多個背景圖像將其用作左邊框，只需在框左側添加一些填充。順序非常重要，因爲它處理圖像的分層。第一個將在所有其他人之上。該順序充當圖像的z索引。

Answer 3

這是我講的，也就是分層二級分度，一道白影的伎倆：

http://jsfiddle.net/dmezK/

它不是完美的，但你可以調整它來滿足您的需求，我想。

這裏的HTML：

<div id="main"> 
<div id="cheat"></div> 

</div>​ 

這裏的CSS：

#main 
{ 
    width: 100px; 
    height: 300px; 
    -webkit-box-shadow: inset 10px 0px 5px -2px #888 ; 
    position: relative; 
} 

#cheat { 
    width: 300px; 
    height: 300px; 
    -webkit-box-shadow: inset 10px 0px 5px -50px white ; 
    position: absolute; 
    left: -100px; 
} 

注：也許你可以使用多個盒子陰影，但它沒有被廣泛支持。

Answer 4

這是最接近我可以做：

div { 
    width: 300px; 
    height: 600px; 
    border: solid 1px; 
    box-shadow: 
    inset 0px 10px 10px #fff, 
    inset 0px -10px 10px #fff, 
    inset 10px 0px 20px rgba(0, 0, 0, .3); 
} 

現場演示：Tinkerbin

Answer 5

試試這個 http://jsfiddle.net/6QSEc/1/

div{ 
    height:200px; 
    width:100px; 
    background-color:white; 
    border:1px solid #f1f1f2; 
    box-shadow:10px 0px 20px -10px rgba(0,0,0,0.5) inset; 
}