css - Box-shadow overflow issue -
i have 2 boxes, title , content. using box-shadow on these make them more looking. right now, both shadows visible 1 on top of other. want title shadow not float on content box.
if add position: relative title box, content shadow stops floating on title (this want do, other way around). however, trying opposite doesn't work. z-index doesnt seem working.
fiddle: http://jsfiddle.net/jr93s/24/
h2 { width: 300px; margin: 20px 0px 0px 20px; padding: 5px 11px 5px 11px; border-radius: 3px; color: #333; background-color: #ccf; box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5); } div { width: 300px; height: 300px; margin: 0px 0px 0px 20px; padding: 10px 10px 10px 10px; border: 1px solid #999; border-radius: 3px; box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5); } <h2>title</h2> <div>some stuff here</div> any ideas? thanks!
you use inset box-shadows avoid overlap.
here, http://jsfiddle.net/jr93s/25/
edit
i guess effect want.
Comments
Post a Comment