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

先看看代码,十分简单:

以下是引用片段:

<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、CentOS中yum的详细说明及使用方法
https://www.onexin.net/centos-in-the-detailed-description-and-use-yum-method/

2、URLCode加密和解密转换 | rawurlencode,rawurldecode,urlencode,urldecode
https://www.onexin.net/urlcode-encryption-and-decryption-conversion-rawurlencode-rawurldecode-urlencode-urldecode/

3、Supesite模板制作官方视频教程
https://www.onexin.net/supesite-templates-to-create-the-official-video-tutorials/

4、UCH群组栏目新增无限级子分类功能
https://www.onexin.net/part-of-uch-group-new-infinite-level-sub-classification-of-functions/

5、IIS 80端口被占用解决方法
https://www.onexin.net/iis-80-port-solution-occupied/

Leave a Reply