Border Radius mit Schatteneffekt(Shadow) für alle gängige Browser (Crossbrowser)

Letztens haben wir kurze Snippet zu den runden Ecken geschrieben, heute möchten wir es mit einem Schatteneffect(Shadow) erweitern.

Hier ist der Link zum Download:

http://code.google.com/p/box-shadow/downloads/list

Es geht ganz einfach: ie-css3.htc entpacken, damit auch unser Freund IE uns alles anzeigt. Und Einbisschen CSS einfügen:

.box {
	background: transparent url(hintergrund.jpg); no-repeat top left;
	width: 414px;
	height: 262px;
	margin: 0 auto 35px auto;
	padding: 15px;
	border: 11px solid #c6ac6c;
	position: relative;
	margin-top: 35px;

	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;

	-moz-box-shadow: 10px 10px 10px #000;
	box-shadow: 10px 10px 10px #000;

	z-index: 2;

	behavior: url(ie-css3.htc);
}
.box div {
	position: absolute;
	bottom: 10px;
	left: 0px;
	width: 100%;
	text-align: center;
	font-weight: bold;
	font-size: 13pt;
	color: #ffd550;
	_bottom: 21px; /* IE6 */
	_width: 108%; /* IE6 */
}

In HTML brauchen wir jetzt nur 2 DIVS um unser Text: