如何只删除盒子阴影的顶部？ [英] How do I remove only the top part of a box-shadow?

问题描述

我使用 border-radius 和 box-shadow 使元素发光。 p>

我可以只移除 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; 
} 
  

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

解决方案

这样做，但我承认不知道是否有一个更好的方法（或者如果没有添加一个包装元素可能）。使用多个 box-shadow 将是一个好主意，但我似乎不能使它看起来一样。

查看： http://jsfiddle.net/thirtydot/8qEUc/3/

$ b

HTML ：

  ; div id =bla> 
< div> < / div> 
< / div> 
   

CSS ：

  #bla {
 overflow-y：hidden; 
 padding：0 10px 10px 10px; 
 margin：0 -10px 
} 
 #bla> div {
 / *这里你的问题的CSS * / 
} 
  

I'm using border-radius and box-shadow to make a glow around an element.

Can I remove only the top part of the 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!

解决方案

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.

See: 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 */
}

这篇关于如何只删除盒子阴影的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！