I have the following box-shadow inset css3 styling:
box-shadow: inset 0开发者_开发技巧 0 10px 0 rgba(255, 255, 255, 1);
The inset styling appears on all 4 sides of the box but I do not want styling on the top. How can I remove the styling from the top but keep the styling on the Left, Bottom, Right?
Thanks
This is what you want:
.right-left-bottom-shadow {
box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}
The first one is left, second bottom and last the shadow for the right side. This looks really nice if your border has color #CCC
.
You can't do that with just box-shadow
so far, but you can composite box-shadow
with other possibilities like overflow: hidden
. For example, you can push the top shadow outside of parent element and hide that part with overflow: hidden
.
See this demo: http://jsfiddle.net/CatChen/Fty2N/3/
No CSS method I know for this but following can be a work around (not a perfect solution)
<div id="mydiv">
<div class="workaround"></div>
</div>
CSS
#mydiv {
background-color:#f00;
height:100px;
width:100px;
box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
padding:0 2px;
}
#mydiv .workaround {
background-color:#f00;
width:100%;
height:10px;
}
Check Fiddle http://jsfiddle.net/bZF48/17/
精彩评论