用相对定位和负向移动完成图片象框阴影

先看看代码,十分简单:

以下是引用片段:

<style>
.out { 
  position:relative; 
  background:#bbb;  
  margin:10px auto; 
  width:285px 
  } 
.in { 
  background:#fff;  
  border:1px solid #555; 
  padding:10px 5px; 
position:relative;  
  top:-5px; 
  left:-5px; 
  } 
</style>

<div class="out"> 
<div class="in" > 
<img src="/imagelist/06/24/k6xq28872yvo.jpg" alt="" /> 
</div> 
</div>

随机文章:

1、结合firebug学习jQuery选择器(菜鸟成功记)
https://www.onexin.net/learning-jquery-selector-rookie-success-diary-combined-with-firebug/

2、了解Android的由来
https://www.onexin.net/understanding-of-the-origin-of-android/

3、CSS层叠样式的主次顺序
https://www.onexin.net/css%e5%b1%82%e5%8f%a0%e6%a0%b7%e5%bc%8f%e7%9a%84%e4%b8%bb%e6%ac%a1%e9%a1%ba%e5%ba%8f/

4、在页面上实现Google PR值的显示
https://www.onexin.net/%e5%9c%a8%e9%a1%b5%e9%9d%a2%e4%b8%8a%e5%ae%9e%e7%8e%b0google-pr%e5%80%bc%e7%9a%84%e6%98%be%e7%a4%ba/

5、用户体验:JS实现仿新浪信息提示效果
https://www.onexin.net/the-user-experience-js-to-achieve-the-effect-of-imitation-sina-information-tips/

转载请注明出处:https://www.onexin.net/with-the-relative-positioning-and-negative-for-the-mobile-to-complete-the-picture-like-a-shadow-box/

Leave a Reply

Your email address will not be published. Required fields are marked *