html - Is it possible to create shadow like that in CSS3?

Question

I'm almost sure that it's not possible to create shadows like that in CSS3 but I'm asking just in case anybody tried that and found a way:

I have sidebar to the right (limited height) and longer content the the left. The shadow fades in at the beginning and fades out at the end. Can this shadow be purely procedural (no raster images at all)?

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在这里

不同的调整在这里

---

原始答案

如果你需要一个“简单”的嵌入阴影，你也可以像这样实现：

#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在这里

Answer 2

试试这个 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;
}

Answer 3

.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。

Answer 4

这是我谈到的技巧，即用白色阴影分层二级div：

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 5

这是我能做到的最接近的：

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