用相对定位实现简单的图片边框阴影效果-优快云博客

本文介绍了一种使用CSS相对定位实现简单阴影效果的方法。通过调整图片的top和left属性，使其产生阴影错觉，同时保持布局的稳定性。这种方法适用于纯色阴影，无需额外的背景图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现阴影效果方法有很多，一般复杂一点的外发光式的阴影都使用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相对定位实现简单的阴影效果 简单的阴影效果