边缘内的边界图像

aci*_*cid 3 css image margin css3

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

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

Gil*_*mbo 7

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

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

标记:

<figure></figure>
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

风格

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;
}
Run Code Online (Sandbox Code Playgroud)