CSS 如何仅删除框阴影的顶部？

How do I remove only the top part of a box-shadow?

提问by Bakudan

I'm using border-radiusand box-shadowto make a glow around an element.

我正在使用border-radius和box-shadow使元素周围发光。

Can I remove only the top part of the box-shadow?

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

Live example

活生生的例子

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;
}

Edit: this little thingy is the problem!

编辑：这个小东西是问题所在！

采纳答案by thirtydot

This works, but I'll admit to not knowing if there's a better way (or if it's possible without adding a wrapper element). Using multiple box-shadows would be a good idea, but I can't seem to make it look the same.

这有效，但我承认不知道是否有更好的方法（或者是否可以不添加包装元素）。使用多个box-shadows 是个好主意，但我似乎无法让它看起来一样。

See:http://jsfiddle.net/thirtydot/8qEUc/3/

见：http : //jsfiddle.net/thirtydot/8qEUc/3/

HTML:

HTML：

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

CSS:

CSS：

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

回答by kizu

Since you use box-shadow, you can use pseudo-element to create it and place under your div, placing it so only the needed parts would be visible: http://jsfiddle.net/kL8tR/60/

由于您使用 box-shadow，您可以使用伪元素来创建它并放置在您的 div 下，放置它以便只有需要的部分可见：http: //jsfiddle.net/kL8tR/60/

There are some important notes:

有一些重要的注意事项：

• The pseudo-element must have z-index: -1
• The div itself must have position: relativeand no z-index

• 伪元素必须有 z-index: -1
• div 本身必须有position: relative，没有z-index

Pseudo-elements + CSS3 = awesomeness :)

伪元素 + CSS3 = 很棒 :)

回答by sandeep

@milo; is not your top border it's a shadowwhich you give in your code

@米洛；不是您的顶部边框，shadow而是您在代码中提供的边框

for removing top glow you have to define vertical spacing of your shadow.

要去除顶部发光，您必须定义阴影的垂直间距。

Write this in your shadow css:

在你的影子 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) ;

& your can generate from here http://css3generator.com/

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

NOTE: there are four properties of shadow are horizontal, vertical, blur & spreadfor inside shadow you can define insetfor it

注意：shadow 有四个属性horizontal, vertical, blur & spread用于内部阴影，您可以inset为其定义

回答by Marc Uberstein

You can try the following. My method only uses CSS.

您可以尝试以下操作。我的方法只使用 CSS。

Example Link :http://jsfiddle.net/kL8tR/56/

示例链接：http : //jsfiddle.net/kL8tR/56/

div{
    margin-top: 25px;
    color: #fff;
    height: 45px;

    padding: 26px 24px 46px;

    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-top: none;

    -moz-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    -webkit-box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);
    box-shadow: 0 0 10px 1px black,  0px -20px black, 0px 1px 10px rgba(255,255,255,0.7);

}

Basically what I am doing, I am creating multi-layer shadows, so the first shadow overlays the second layer, masking the top section.

基本上我在做什么，我正在创建多层阴影，所以第一个阴影覆盖第二层，掩盖顶部。

I have used this before, here is my reference :

我以前用过这个，这是我的参考：

Look under section - Layering multiple shadows [ http://www.css3.info/preview/box-shadow/]

查看部分 - 分层多个阴影 [ http://www.css3.info/preview/box-shadow/]

回答by Lobabob

you could just shift the shadow lower down (vertical displacement) and reduce the shadow radius, something along the lines of (replace the asterisk with the amount of pixels needed to justcover the top shadow with the box itself):

您可以将阴影向下移动（垂直位移）并减小阴影半径，沿线（将星号替换为仅用框本身覆盖顶部阴影所需的像素量）：

box-shadow: 0 *px 10px 0 rgba(200,200,200,0.7);

回答by Matt C

If you use a negative spread radius and calibrate the other parameters to suit what your looking for it should give you the desired effect.

如果您使用负传播半径并校准其他参数以适应您的需求，它应该会给您带来所需的效果。

CSS Box Shadow Negative Radius Spread

CSS 盒阴影负半径传播

div {
  height: 100px;
  width: 100px;
  border: solid 1px black;
  -webkit-box-shadow: 5px 5px 10px -6px black;
  -moz-box-shadow: 5px 5px 10px -6px black;
  box-shadow: 5px 5px 10px -6px black;
}

<div></div>