Do you want the box-shadow to scale with the width of the container or with the height of the container? You can't really specify a height and width of your shadow, only a spread. So if your container shrinks by 10% in width but does not shrink in height then your shadow will shrink by 10% (if it were possible), i.e. your shadow's height would scale even though it probably shouldn't.
If you want the box-shadow to actually scale correctly with regards to height and width, you would have to create multiple shadows - one for height, one for width.
However, you will never be able to scale the actual shadow, only the container of the shadow. So you would create a container inside your main container and then give it negative margins and attach the box-shadow. However, you will soon notice that your shadow actually grows instead of shrinking when you scale the container down.
Seems a bit overkill to try and scale something which isn't scalable without using media queries or jQuery.
However, if you're looking for scalable borders, i.e. box-shadow without blur :P, then look no further:
http://jsfiddle.net/925r2/3/
<style>
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
margin: 100px auto 0;
width: 80%; /* .content width */
height: 400px; /* .content height */
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff; /* .content background */
}
.shadow {
position: absolute;
top: -10%; /* .content shadow top height */
right: -5%; /* .content shadow right width */
bottom: -10%; /* .content shadow bottom height */
left: -5%; /* .content shadow left width */
background: #000; /* .content shadow, unfortuntely no blur effect */
}
</style>
<div class="wrapper">
<div class="shadow"></div>
<div class="content">This is your content</div>
</div>
