logo标签列表

带阴影的竖直线

htmlcss
3
我想要在整个页面上创建一个垂直线阴影，就像这样：http://i.stack.imgur.com/fsJCE.png。我已经尝试过box-shadow，但那样我仍然会在顶部看到阴影，我只希望它在右侧像图片一样。
我已经尝试过以下方法：
<html>
<head>
    <title>Box Shadow Test</title>
    <style>
    body,
html {
margin:0;
padding:0;
color:#000;
background:#52667B;
}
    wrapper {
        width:750px;
margin:0 auto;
background:#99c;
    }


    #main {
        padding-left: 50px;
float:left;
width:500px;
 -webkit-box-shadow: -4px 0px 5px -2px #000 ;
}
#sidebar {
float:left;
width:250px;

}
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="sidebar" class="navigation">

    <ul>
        <li><a href='home'>Nieuws</a></li>
        <li><a href='events'>Duiken</a></li>
        <li><a href='places'>Duikplaatsen</a></li>
        <li><a href='reports'>Duikverslagen</a></li>
        <li><a href='forum'>Forum</a></li>
        <li><a href='gallery'>Galerij</a></li>
        <li><a href='faq'>FAQ</a></li>
        <li><a href='contact'>Contact</a></li>
    </ul>

        </div>
        <div id="main">
            Lorem ipsum aute commodo cupidatat veniam occaecat esse culpa exercitation dolore magna commodo enim eiusmod laboris est dolor laboris velit sint voluptate id cillum nisi quis aliqua ut labore consectetur Duis nisi occaecat do et cupidatat in aute labore nulla consequat dolore dolor consectetur cupidatat fugiat eiusmod tempor anim eiusmod dolor proident ex aute sunt Excepteur cupidatat fugiat nostrud irure id laboris ad enim nulla deserunt quis eu ullamco consectetur tempor nostrud magna quis ut ex minim id cupidatat amet culpa amet nisi Duis Duis irure irure ullamco est dolor culpa esse id in ut reprehenderit in esse pariatur in nostrud fugiat labore ut irure do in consectetur incididunt ullamco sint do occaecat dolor Ut pariatur non sint ut in incididunt id Duis aute nulla et eu ullamco in tempor non nisi reprehenderit sit reprehenderit et tempor officia sunt pariatur aliquip in pariatur labore veniam ad adipisicing velit aliqua aliqua cillum esse Duis pariatur eiusmod sed consectetur in cillum laborum dolor enim laborum qui velit pariatur adipisicing id aute cupidatat cupidatat quis anim tempor ad labore ad sunt minim laborum exercitation labore sunt quis nulla consequat Duis deserunt deserunt eiusmod aliqua sed in qui occaecat do velit reprehenderit dolor dolor cillum veniam dolor consectetur est commodo deserunt eu amet velit velit commodo est reprehenderit aute. 
        </div>
    </div>

</body>
</html>

但是从这张图片上可以看到：http://i.stack.imgur.com/01My9.png，底部仍然有一些阴影。

有人知道如何解决吗？

1
尝试这个链接 https://dev59.com/FW435IYBdhLWcg3w9FHi - Tino M Thomas
谢谢提供链接，但是你可以看到在我的代码中我使用了他的box-shadow行并从那里开始。如果你移除他的边框，你会发现你仍然有同样的问题。 - Bart De Kimpe
1个回答
1

首先，使用box-shadow而不是-webkit-box-shadow。然后，只需调整值，直到获得完美的阴影。

我尝试了这个：

box-shadow: -5px 0px 5px -4px #000 ;

然后将position:absolute;和top:0以及bottom:0;添加到#main中。

Demo:
http://jsfiddle.net/magq5/1/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接