Can CSS3 box-shadow:inset do only one or two sides? like border-top?

Question

I\'m wondering about the support for side specific inner shadows in css3.

I know this works great on supported browsers.

div { box-shadow:inset 0px 1px 5         


        

Answer 1

I don't think your really need box-shadow-top because if you set offsetx to 0 and offsety to any positive value only remaining shadow is on top.

if you want to have shadow on top and shadow in the bottom you just can simply use two divs:

  

    some content
  

if you want to get rid of shadow on sides use rgba instead of hex color and set bigger offsety:

box-shadow:inset 0 5px 5px rgba(0,0,0,.5) 

this way you give shadow more opacity so sides stay hidden and with more offset you get less opacity

full example: