CSS3利用box-shadow实现相框效果

CSS3利用box-shadow实现相框效果

<style>
  html {
    overflow: hidden;
    background-color: #653845;
    background-image: linear-gradient(45deg, hsla(0,0%,0%,.1) 50%, transparent 50%),
                      linear-gradient(-45deg, hsla(0,0%,0%,.1) 50%, transparent 50%);
    background-size: .25em .25em;
    box-shadow: inset 0 0 500px hsla(0,0%,0%,.5);
    height: 100%;
    padding: 1px;
  }

  body {
    height: 300px;
    width: 400px;
    margin: -150px -200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: gray url(http://pic17.nipic.com/20111122/6759425_152002413138_2.jpg);
    background-size: cover;
    border: 1px solid;
    border-color: #bbb #999;
    box-shadow:
      0 2px 5px hsla(0,0%,0%,.4),
      inset 0 1px 0 #ccc,
      inset 1px 0 0 #aaa,
      inset 0 -1px 0 #ccc,
      inset -1px 0 0 #aaa,

      inset 0 2px 0 #c6c6c6,
      inset 2px 0 0 #a6a6a6,
      inset 0 -2px 0 #c6c6c6,
      inset -2px 0 0 #a6a6a6,

      inset 0 3px 0 #c0c0c0,
      inset 3px 0 0 #a0a0a0,
      inset 0 -3px 0 #c0c0c0,
      inset -3px 0 0 #a0a0a0, 

      inset 0 4px 0 #b9b9b9,
      inset 4px 0 0 #999,
      inset 0 -4px 0 #b9b9b9,
      inset -4px 0 0 #999,

      inset 0 5px 0 #b6b6b6,
      inset 5px 0 0 #969696,
      inset 0 -5px 0 #b6b6b6,
      inset -5px 0 0 #969696,

      inset 0 6px 0 #b0b0b0,
      inset 6px 0 0 #909090,
      inset 0 -6px 0 #b0b0b0,
      inset -6px 0 0 #909090,

      inset 0 7px 0 #a9a9a9,
      inset 7px 0 0 #898989,
      inset 0 -7px 0 #a9a9a9,
      inset -7px 0 0 #898989,

      inset 0 8px 0 #a6a6a6,
      inset 8px 0 0 #868686,
      inset 0 -8px 0 #a6a6a6,
      inset -8px 0 0 #868686,

      inset 0 9px 0 #a0a0a0,
      inset 9px 0 0 #808080,
      inset 0 -9px 0 #a0a0a0,
      inset -9px 0 0 #808080,

      inset 0 10px 0 #888,
      inset 10px 0 0 #666,
      inset 0 -10px 0 #888,
      inset -10px 0 0 #666,

      inset 0 0 10px 10px hsla(0,0%,0%,.5);
  }
</style>