关于CSS控制图片阴影的效果，padding值不起作用。
时间：2010-09-07
来源：互联网
效果做出来和想要的不一样，不知道为什么img的padding值不起作用。
shadow.gif (3.6 KB)
dunstan.jpg (46.37 KB)
复制内容到剪贴板
<head>
<title>阴影效果</title>
<style type="text/css">
.img-wrapper {
background:url(images/shadow.gif) no-repeat bottom right;
clear:right;
float:left;
position:relative;
}
.img-wrapper img {
background:#fff;
border:1px solid #a9a9a9;
padding:4px;
display:block;
margin:-5px 5px 5px -5px;position:relative;
}
</style>
</head>
<body>
<div class="img-wrapper"><img src="images/dunstan.jpg" width="240px" height="340px" /></div>
</body>
</html>
代码:
<html><head>
<title>阴影效果</title>
<style type="text/css">
.img-wrapper {
background:url(images/shadow.gif) no-repeat bottom right;
clear:right;
float:left;
position:relative;
}
.img-wrapper img {
background:#fff;
border:1px solid #a9a9a9;
padding:4px;
display:block;
margin:-5px 5px 5px -5px;position:relative;
}
</style>
</head>
<body>
<div class="img-wrapper"><img src="images/dunstan.jpg" width="240px" height="340px" /></div>
</body>
</html>
附件
shadow.gif (3.6 KB)
2010-9-7 21:32
dunstan.jpg (46.37 KB)
2010-9-7 21:32
作者: xueshuibing 发布时间: 2010-09-07
对<img />这个实体标签用padding样式是毫无意义的，对img应该设置margin。
作者: moyixiu 发布时间: 2010-09-07
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
