<!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浏览器的效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步