<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body{background-color:#EEE;}
.card .image-wrap {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="card">
<span class="image-wrap"
style="position:relative; display:inline-block; width:150px; height:150px;background:url(http://www.w3cschool.cn/style/download.png) no-repeat center center;">
</span>
</div>
</body>
</html>
【reflection】
