cssはフォトフレームのようなシャドウdivのshadow効果を実現する
1345 ワード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS - </title>
<style type="text/css">
.container {padding-left:10px;}
.shadow {float:left;}
.frame {position:relative; background:#fff; padding:10px; display:block;
-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
}
.clear {clear:left;}
</style>
<!--[if IE]>
<style type="text/css">
.container {padding-left:14px;}
.frame {left:4px; top:4px;}
.shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
</style>
<![endif]-->
</head>
<body>
<br />
<div class="shadow">
<img class="frame" src="/uploadfile/200905/19/1554522229.jpg" alt="" />
</div>
</div>
<br class="clear" />
<br />
</div>
</body>
</html>