Box-Shadow Outside
First example.
HTML
<div class="shadow-example">
<div class="content">Box-shadowed element</div>
</div>
CSS
.shadow-example {
margin: 40px;
background-color: rgba(68, 68, 68);
/* Explorer */
-moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
filter:
/* Explorer */
progid:DXImageTransform.Microsoft.Blur(PixelRadius=3, MakeShadow=true, ShadowOpacity=0.30);
-ms-filter:
/* Explorer */
"progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadow-example .content {
position: relative;
text-align:center;
/* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}