当一个开发者需要制作图片边框效果时通常有两种选择：一是使用Photoshop来制作，二是在通过CSS来渲染“盒中盒”的效果。在这个教程中，我们要制作一种带复杂边框的相框效果，通过 CSS3 我们可以很容易的完成这种效果。

通常在美术馆中展览的相片或图片都使用一个相框将其表起来。除了最外层的相框外，里面还有几层不同颜色和纹理的装饰，我们就是要在网页上通过CSS来展示这种效果。

我们使用的HTML结构仅仅是一个标签：

首先，让我们思考一下哪一个CSS属性更适合于制作这种图片的边框。box-model显然是一个很好的选择，border可以用来制作外边框，外边框和图片元素之间的padding可以用来制作装饰。

一般我们都需要图片举要响应式效果，所以我们的CSS代码可以这样写：

img.mat {

box-sizing: border-box;

width: 80%;

height: auto;

display: block;

margin: 4rem auto;

padding: 10%;

background: #F4F0EC;

border: 8px solid #333;

box-shadow: 0 0 0 50px rgba(125,135,18,0.3) inset;

}

注意：我们使用box-sizing: border-box来使图片的相对缩放效果变得简单。

这里的技巧是内部阴影没有提供水平或垂直的偏移或者任何的模糊效果。仅仅使用spread、inset和颜色值来渲染内部的阴影效果。

我们可以扩展一下，让图片效果更具层次感，我们可以再添加一个内部阴影，并且为它提供一个背景图片：

img.mat {

box-sizing: border-box;

width: 80%;

height: auto;

display: block;

margin: 4rem auto; padding: 10%;

background-image: url(cardboard.jpg);

background-repeat: no-repeat; background-size: contain;

border: 8px solid #333;

box-shadow: 0 0 0 50px rgba(125,135,18,0.3) inset,

0 0 30px rgba(0,0,0,0.8) inset;

}

最后，我们要使用outline为图片制作最外层的边框效果，这一步要注意：Firefox浏览器对outline的解析与其它浏览器有所不同：它有一个默认的12px的offset，而且outline会将所有的外部阴影向外推挤。

因此，为了兼容Firefox浏览器，最终的代码应该如下所示：

img.mat3 {

-moz-box-sizing: border-box; box-sizing: border-box;

width: 100%;

height: auto;

display: block;

padding: 10%;

background-color: #A67B5B; background-image: url(cardboard.jpg);

background-repeat: no-repeat; background-size: cover;

border: 6px double #483C32;

box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,

0 0 0 11px rgb(180, 130, 90),

0 0 30px rgba(0,0,0,0.8) inset;

-webkit-box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset,

0 0 0 11px rgb(180, 130, 90),

0 0 30px rgba(0,0,0,0.8) inset,

0 30px 20px rgba(0,0,0,0.3);

outline: 2px solid #333; outline-offset: 0px;

}

这样，PS级的图片相框效果使用 CSS3 就做好了。但这仅仅是开始，你还可以做得更好更漂亮，希望看过这篇文章的童鞋都多动手多思考，做出更漂亮的效果。