如何只删除盒子阴影的顶部? [英] 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
?
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-shadow
s 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屋!