是否有可能在CSS3中创建阴影?

时间:2012-07-27 09:54:42

标签: html css html5 css3 shadow

我几乎可以肯定,在CSS3中创建阴影是不可能的,但我要求以防任何人尝试过并找到方法:

enter image description here

我有右边的边栏(有限的高度)和左边的更长的内容。阴影在开始时淡入,在结束时淡出。这个阴影可以纯粹是程序性的(根本没有光栅图像)吗?

5 个答案:

答案 0 :(得分:5)

你可以像这样使用径向渐变:

#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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

这是我谈到的技巧,即用白色阴影分层次要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;
}

注意:也许您可以使用多个框阴影,但它没有得到广泛支持。

答案 3 :(得分:0)

这是我能做的最接近的:

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

答案 4 :(得分:0)

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