首页 > html > shadow > Effect - 如何使用CSS3盒阴影创建一个想象的化身

Effect - 如何使用CSS3盒阴影创建一个想象的化身

shadow 【shadow】
我们想知道如何使用CSS3盒阴影创建一个想象的化身。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.avatar {
  width: 120px;
  height: 120px;
  margin: .5em;
  display: inline-block;
  background-repeat: none;
  background-size: 100% 100%;
  border-radius: 8px;
  -webkit-box-shadow: inset -1px -1px 8px #000, inset 2px 3px 1px #fff;
  box-shadow: inset -1px -1px 8px #000, inset 2px 3px 1px #fff;
}
</style>
</head>
<body>
  <div class="avatar" style="background-image: url()"></div>
  <div class="avatar"
    style="background-image: url(http://www.w3cschool.cn/style/download.png)"></div>
  <div class="avatar"
    style="background-image: url()"></div>
</body>
</html>