ну вот ради теста решил добавить тень, вроде идентично получилось:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>:)</title>
<style>
* { margin:0; padding:0; }
#above, #below {
width: 300px;
height: 300px;
}
#above {
background-color: red;
position: relative;
top: 10px;
left: 15px;
}
#below {
background-color: black;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
box-shadow: 5px 5px 8px rgba( 0, 0, 0, 0.6 );
/*IE7*/
filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
/*IE8*/
-ms-filter: Alpha(opacity=60) progid:DXImageTransform.Microsoft.Blur(pixelRadius=4);
/* весь этот говнокод ради ИЕ7 */
govnokod: expression(
this.elAppended?(
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor
):(
this.elAppended=document.createElement('div'),
this.nextSibling?this.parentNode.insertBefore(this.elAppended,this.nextSibling):
this.parentNode.appendChild(this.elAppended),
this.elAppended.style.position='absolute',
this.elAppended.style.width='100%',
this.elAppended.style.height='100%',
this.elAppended.style.backgroundImage=this.parentNode.currentStyle.backgroundImage,
this.elAppended.style.backgroundColor=this.parentNode.currentStyle.backgroundColor,
this.elAppended.style.left=0,
this.elAppended.style.top=0,
this.elAppended.style.zIndex=-1
)
);
}
</style>
</head>
<body>
<div id="above">
Hello World
<div id="below"></div>
</div>
</body>
</html>
Идеальное на мой взгляд решение. Спасибо
melky, за решение, сам буду пользоваться им.