首页 > 代码库 > 用相对定位和负向移动完成图片相框阴影
用相对定位和负向移动完成图片相框阴影
<!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浏览器的效果:
用相对定位和负向移动完成图片相框阴影
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。