css实现类似相框的阴影div的shadow效果

最新推荐文章于 2020-10-20 15:17:33 发布

weixin_30595035

最新推荐文章于 2020-10-20 15:17:33 发布

阅读量48

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/CoolChen/archive/2012/02/23/2365210.html

版权

<!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>

转载于:https://www.cnblogs.com/CoolChen/archive/2012/02/23/2365210.html

weixin_30595035

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现类似相框的阴影div的shadow效果

<!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="te...
复制链接

扫一扫