用相对定位实现简单的图片边框阴影效果
2010-03-03 11:49
633 查看
实现阴影效果方法有很多，一般复杂一点的外发光式的阴影都使用png作为背景图片来实现阴影，今天做的这个比较简单，阴影是纯色的，所以可以直接使用背景颜色，图片的位移一下就能使图片产生阴影效果。图片的位移可以使用相对定位（position:relative）和top，left等值来实现，这里我们首先要理解相对定位的真正作用。
父级元素相对定位（position:relative）一般被我们用来和子元素绝对定位（position:absolute）配合，使子元素定位。绝对定位将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义；
但是相对定位（position:relative）是对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置,这里可以确定相对定位没有脱离文档流。
那么相当定位是相对于什么定位呢？我觉得我们可以这么理解：相对定位是相对于该元素本身的定位。有人说相对定位很”自私”,因为相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
<html>
<head>
<title>用CSS相对定位实现简单的阴影效果</title>
<style type="text/css">
.shadow{ float:left; margin-right:20px; background-color:#EFEFEF;}
.shadow img{ padding:4px; border:1px solid #CDCDCD; background-color:#FFFFFF; position:relative; top:-5px;left:-5px;}
</style>
</head>
<body>
<strong>简单的阴影效果</strong>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/logo.png" width="180" height="64" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/alert.png" width="248" height="192" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/miniphoto.jpg" width="392" height="252" />
</a>
</div>
</body>
</html>
用CSS相对定位实现简单的阴影效果
.shadow{ float:left; margin-right:20px; background-color:#EFEFEF;}.shadow img{ padding:4px; border:1px solid #CDCDCD; background-color:#FFFFFF; position:relative; top:-5px;left:-5px;}
简单的阴影效果
function runcode(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); }
来源：css88.com
父级元素相对定位（position:relative）一般被我们用来和子元素绝对定位（position:absolute）配合，使子元素定位。绝对定位将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义；
但是相对定位（position:relative）是对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置,这里可以确定相对定位没有脱离文档流。
那么相当定位是相对于什么定位呢？我觉得我们可以这么理解：相对定位是相对于该元素本身的定位。有人说相对定位很”自私”,因为相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的（相对对象本身偏移）。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变（文本流对相对定位对象还存在影响），但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。
<html>
<head>
<title>用CSS相对定位实现简单的阴影效果</title>
<style type="text/css">
.shadow{ float:left; margin-right:20px; background-color:#EFEFEF;}
.shadow img{ padding:4px; border:1px solid #CDCDCD; background-color:#FFFFFF; position:relative; top:-5px;left:-5px;}
</style>
</head>
<body>
<strong>简单的阴影效果</strong>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/logo.png" width="180" height="64" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/alert.png" width="248" height="192" />
</a>
</div>
<div class="shadow">
<a href="http://www.mn-soft.com" target="_blank">
<img src="http://www.mn-soft.com/files/2010/04/miniphoto.jpg" width="392" height="252" />
</a>
</div>
</body>
</html>
用CSS相对定位实现简单的阴影效果
.shadow{ float:left; margin-right:20px; background-color:#EFEFEF;}.shadow img{ padding:4px; border:1px solid #CDCDCD; background-color:#FFFFFF; position:relative; top:-5px;left:-5px;}
简单的阴影效果
function runcode(element) { var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); }
来源：css88.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 纯CSS实现的漂亮的立体图片边框效果，阴影代码
- HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
- 纯CSS实现的漂亮的立体图片边框效果，阴影代码
- C# 无边框窗体边框阴影效果的简单实现
- 相对定位实现简单阴影效果
- XRecyclerView的简单使用与图片拉动字体缩放效果的实现
- 使用Qt实现简单的图片预览效果
- android中图片翻页效果简单的实现方法
- 使用Qt实现简单的图片预览效果
- Swift3 实现图片圆角、阴影、边框
- Android开发之实现最简单最酷炫的3D图片浏览效果(二)
- Android 使用xml实现边框阴影，背景渐变效果（附有RGB颜色查询对照表）
- css实现边框阴影效果的方法（含兼容）
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- html中利用js实现简单图片轮换效果
- jQuery实现的简单图片轮播效果完整示例
- CSS实现图片选中加边框效果
- 小三角带边框带阴影的div——css实现效果
- 如何简单实现内凹阴影标题栏效果
- CSS控制背景图像平铺实现边框阴影效果