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>