首页 > 代码库 > 用相对定位和负向移动完成图片相框阴影

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

<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>用相对定位和负向移动完成图片相框阴影</title>    <style>    img {        max-width: 400px;    }    .out {        width: 420px;        background: #dddddd;        position: relative;        margin: 20px auto    }    .in {        padding: 10px;        background: #ffffff;        position: relative;        top: -5px;        left: -5px;        border: 1px solid #000000;    }    </style></head><body><div class="out">    <div class="in">        <img src="http://ugc.qpic.cn/gbar_pic/AkBkRP2pHckJiaAErLibunyQUvGzrLPo7vEdbqUXEmo9rd24mcq6nPVw/1000" alt="">    </div></div>    </body></html>

 

Chorme浏览器的效果:

技术分享

 

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