边缘内的边界图像

Question

我怎样才能用CSS实现这个效果:

我是否需要一个带有边距和边框的较小Div,或者这是否可能使用box-shadow

Answer 1

你需要一个单独的元素:before或:毕竟由你决定

演示:http://jsfiddle.net/6a95A/1/

标记:

<figure></figure>

风格

figure{
    width:200px;
    height: 180px;
    position:relative;
    background-image:url(http://24.media.tumblr.com/tumblr_m2scelXYGA1qbmtexo1_500.jpg);
    background-size:cover;
    background-position:50%;
}
figure:before{
    content:'';
    position: absolute;
    left: 2%;
    top: 2%;
    width: 95%;
    height: 95%;
    border: 1px solid white;
}