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

先看看代码,十分简单:

以下是引用片段:

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

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

随机文章:

1、Mac OS X Snow Leopard – 精益求精的用户体验
https://www.onexin.net/mac-os-x-snow-leopard-%e7%b2%be%e7%9b%8a%e6%b1%82%e7%b2%be%e7%9a%84%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c/

2、CSS基础学习:样式表CSS简明教程
https://www.onexin.net/css-based-learning-stylesheet-css-concise-guide/

3、经典DIV + CSS Layout
https://www.onexin.net/classic-div-css-layout/

4、Magento语言包及模板汉化全攻略(翻译方法)
https://www.onexin.net/speaking-of-language-packs-and-templates-magento-raiders/

5、Web前端性能优化开发测试
https://www.onexin.net/web-front-end-performance-optimization-development-test/

Leave a Reply