是否可以在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; 
}