是否有可能在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在这里

这里有不同的调整

原始答案

如果你需要一个"简单"的插入阴影,你也可以这样做:

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