我几乎可以肯定在 CSS3 中创建这样的阴影是不可能的，但我想问的是以防万一有人尝试过并找到了方法：
右侧有侧边栏（高度有限），左侧有较长的内容。阴影在开始时淡入，在最后淡出。这个阴影可以是纯程序性的（根本没有光栅图像）吗？
【问题讨论】：
你可以像这样使用径向渐变：
#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));
}
原答案
如果你需要一个“简单”的嵌入阴影，你也可以这样实现：
#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);
}
【讨论】：
width: 15px; 从我所看到的但如果没有办法绕过宽度属性，我可以制作辅助容器。你觉得width: 15px;怎么样？可以消除这种情况并改用我的宽度吗？
这里是我讲的技巧，就是在二级 div 上叠加一个白色的阴影：
我认为它并不完美，但您可以对其进行调整以满足您的需求。
这是 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;
}
注意：也许您可以使用多个盒子阴影，但它没有得到广泛支持。
【讨论】：
这是我能做到的最接近的：
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
【讨论】：
试试这个 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;
}
【讨论】：
.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-index。
【讨论】：