如何仅删除盒子阴影的顶部？

Question

我正在使用border-radius并box-shadow围绕一个元素发光.

我可以只删除顶部box-shadow吗？

实例

div {
    margin-top: 25px;
    color: #fff;
    height: 45px;
    margin-top: -5px;
    z-index: -10;
    padding: 26px 24px 46px;
    font-weight: normal;
    background: #000; /*#fff;*/
    border-top: 0px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
     -khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
       -moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
            box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}

编辑:这个小东西就是问题!

Answer 1

由于你使用了box-shadow,你可以使用伪元素来创建它并放在你的div下面,放置它以便只显示所需的部分:http://jsfiddle.net/kL8tR/60/

有一些重要的注意事项:

• 伪元素必须有 z-index: -1
• div本身必须有position: relative,否则z-index

伪元素+ CSS3 =太棒了:)

Answer 2

这有效,但我承认不知道是否有更好的方法(或者如果没有添加包装元素则可能).使用多个box-shadows会是一个好主意,但我似乎无法让它看起来一样.

请参阅: http ://jsfiddle.net/thirtydot/8qEUc/3/

HTML:

<div id="bla">
    <div> something </div>
</div>

CSS:

#bla {
    overflow-y: hidden;
    padding: 0 10px 10px 10px;
    margin: 0 -10px
}
#bla > div {
    /* the CSS from your question here */
}

Answer 3

@milo; 不是你的顶部边框,它是shadow你在代码中给出的

要消除顶部光晕,您必须定义阴影的垂直间距.

在你的影子css中写下这个:

box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-moz-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-webkit-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;
-khtml-box-shadow:0 3px 6px 0 rgba(200, 200, 200, 0.7) ;

你可以从这里生成http://css3generator.com/

注意:阴影的四个属性是horizontal, vertical, blur & spread 您可以inset为其定义的阴影