CSS 具有框阴影的跨浏览器无图像阴影

Posted 2021-05-23

/* http://www.neteye.de/articles/box-shadow.html */
.shadow {
	_height: 1px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5,MakeShadow=true,ShadowOpacity=0.5);
	background: #000\9
}

.shadow-content {
	background: #fff;
	position: relative;
	top: 2px;
	left: 2px;
}

div.shadow-content {
	background: #eee;
	padding: 20px;
}

.inline-block {
	line-height: 1px;
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: middle;
}

/*
In order to add a shadow to an arbitrary element, we have to wrap it inside an element with the shadow class and assign the shadow-content class to the element itself:

<div class="shadow">
  <div class="shadow-content">Hello World</div>
</div>
*/