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.

http://jsfiddle.net/jr93s/31/


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -