How to box-shadow inset on just the Left, Bottom, Right -- not the top?

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/