nbarthelemy.com

This is probably not purely in the spirit of script.aculo.us, because it uses images to accomplish the effect. It was adapted for script.aculo.us/prototype from this blog post. Tested in Firefox 2, Safari 3 and IE7.

// adds a drop shadow to a given element
Effect.DropShadow = function(element){
	element = $(element);
	
	var i1 = new Element('div', { 'class': 'i1' });
	var i2 = new Element('div', { 'class': 'i2' });
	var i3 = new Element('div', { 'class': 'i3 cf' });
	
	i2.appendChild(i3);
	i1.appendChild(i2);
	
	$A(element.childNodes).each(function(e){ i3.appendChild(e); });
	
	var bfunc = function(className){
		var e = new Element('div', { 'class': className });
		e.appendChild(new Element('div'));
		return e;
	};		
	
	element.addClassName('cp');
	element.appendChild(bfunc('bt'));
	element.appendChild(i1);
	element.appendChild(bfunc('bb'));		
};

Here is the CSS:

/* Drop Shadow Box
   --------------------------------------------------- */
   
.bt { /* Top corners and border */
	height: 4px;
	margin: 0 0 0 5px;
	background: url(drop_shadow_box.png) no-repeat 100% 0;
}

.bt div {
	position: relative;
	left: -5px;
	width: 5px;
	height: 4px;
	background: url(drop_shadow_box.png) no-repeat 0 0;
	font-size: 0;
	line-height: 0;
}

.bb { /* Bottom corners and border */
	height: 4px;
	margin:0 0 0 4px;
	background: url(drop_shadow_box.png) no-repeat 100% 100%;
}
.bb div {
	position:relative;
	left: -4px;
	width: 4px;
	height: 4px;
	background: url(drop_shadow_box.png) no-repeat 0 100%;
	font-size: 0;
	line-height: 0;
}

.i1 { /* Left border */
	padding:0 0 0 4px;
	background: url(drop_shadow_borders.png) repeat-y 0 0;
}

.i2 { /* Right border */
	padding:0 4px 0 0;
	background: url(drop_shadow_borders.png) repeat-y 100% 0;
}

/* Wrapper for the content. Use it to set the background color and insert some 
    padding between the borders and the content. */
.i3 {
	display:block;
	margin: 0;
}

and the images here and here

Usage:

Effect.DropShadow('some_dom_id');