<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阴影</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <style type="text/css"> *{ margin: 0; padding: 0; } .shadow{ 100px;height: 150px;border:1px solid rgba(244,245,247,0.5); position: relative; box-shadow: 0 4px 8px 0 rgba(184,197,217,.5); } .shadow img{ /*border:1px solid #eee;*/ display: block; /*background-color: pink;*/ } /*.shadow:before{ position: absolute; content: ''; top: 0; 92px; height: 150px; left: 4px; box-shadow: 0 4px 8px 0 rgba(184,197,217,.5); z-index: -1; background-color: pink; }*/ </style> </head> <body style="display: flex;align-items: center;justify-content: center;min-height: 400px;background-color: #fff"> <div class="shadow"> <!-- <img src="" width="100px" height="150px"> --> </div> </body> </html>