<title>无标题文档</title> <style type="text/css"> /*方法一：使用一个GIF文件的方法*/ .gifshadow { padding:4px 10px 10px 4px; border:0; border-top:#eee 1px solid; border-left:#eee 1px solid; background-image: url(shadow.gif);/*换成你的图片*/ background-repeat: no-repeat; background-position: right bottom; } /*方法二：使用滤镜*/ .cssshadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); } /*方法三：使用2个PNG图片，滑动门技术，可实现柔边阴影*/ .pngshadow{ float:right; background:url(right_buttom.png) no-repeat bottom right; padding:0 10px 10px 0; } .pngshadow div{ background:url(left_top.png) no-repeat ; } .pngshadow img { border:1px solid #FFFFFF; padding:4px; } </style> </head> <body > 效果1: <img class="gifshadow" src="1.jpg"/> 效果2: <img class="cssshadow" src="1.jpg" /> 效果3: <div class="pngshadow"> <div><img src="1.jpg" /></div> </div> </body> </html>
