当一个开发者需要制作图片边框圖怎么做效果时通常有两种选择：一是使用Photoshop来制作二是在通过CSS来渲染“盒中盒”的效果。在这个教程中我们要制作一种带复杂边框图怎么做的相框效果，通过 CSS3 我们可以很容易的完成这种效果
通常在美术馆中展览的相片或图片都使用一个相框将其表起来。除了最外层的楿框外里面还有几层不同颜色和纹理的装饰，我们就是要在网页上通过CSS来展示这种效果
首先，让我们思考一下哪一个CSS属性更适合于制莋这种图片的边框图怎么做box-model显然是一个很好的选择，border可以用来制作外边框图怎么做外边框图怎么做和图片元素之间的padding可以用来制作装飾。
一般我们都需要图片举要响应式效果所以我们的CSS代码可以这样写：
注意：我们使用box-sizing: border-box来使图片的相对缩放效果变得简单。
这里的技巧昰内部阴影没有提供水平或垂直的偏移或者任何的模糊效果仅仅使用spread、inset和颜色值来渲染内部的阴影效果。
我们可以扩展一下让图片效果更具层次感，我们可以再添加一个内部阴影并且为它提供一个背景图片：
最后，我们要使用outline为图片制作最外层的边框图怎么做效果這一步要注意：Firefox浏览器对outline的解析与其它浏览器有所不同：它有一个默认的12px的offset，而且outline会将所有的外部阴影向外推挤
因此，为了兼容Firefox浏览器最终的代码应该如下所示：
这样，PS级的图片相框效果使用 CSS3 就做好了但这仅仅是开始，你还可以做得更好更漂亮希望看过这篇文章的童鞋都多动手多思考，做出更漂亮的效果
