CSS生成跨浏览器的阴影效果

最新推荐文章于 2025-07-26 16:38:36 发布

雾塔晨钟

最新推荐文章于 2025-07-26 16:38:36 发布

阅读量118

点赞数

分类专栏： CSS 文章标签：浏览器 CSS IE Microsoft Chrome

CSS 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现阴影效果的方法，支持所有主流浏览器，包括IE6。通过几个简单的CSS语句即可轻松实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阴影效果是web开发中一个头疼的问题，我做过各种各样的阴影效果，大部分都是用图片生成的，很难定位。现在找到了一种简单的用CSS生成阴影的方法，大家看看下面的例子：


<style type="text/css">

			div.shadows {
				margin: 3em auto;
				width: 25em;
				font-size: 1.2em;
				padding: 1em;
				background: #fff;
				border: 1px solid #ccc;
			}

			div.shadows p {
				margin: 0;
				font: 100% Helvetica, Arial, sans-serif;
			}

			div.shadows {
				-moz-box-shadow: 2px 2px 10px #000;
				-webkit-box-shadow: 2px 2px 10px #000;
			}

		</style>	


		<!--[if IE]>
			<style type="text/css">
				div.shadows {
					-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) 
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)";
					filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) 
progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6);
				}
			</style>
		< ![endif]-->


		<div class="shadows">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>

通过几个CSS语句的使用，轻松就实现了阴影效果。
最最重要的是，支持所有的主流浏览器，尤其是IE6，这个可就真的太难得了。

效果请看[url="http://www.fogtowerblog.com/web/css/cross-browser-drop-shadows-using-pure-css.html"]这里[/url]