在图象里面的边界与边际 [英] Border inside an image with margin

问题描述

如何使用CSS实现这种效果：

我需要一个带边框和边框的较小的div，或者这是使用box-shadow的方式。

演示：

演示：

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; 
} 
  

how can I achieve this effect with CSS:

Do I need a smaller Div with a margin and a border or is this somehow possible using box-shadow

解决方案

You just need a single element with :before or :after all is up to you

the Demo : http://jsfiddle.net/6a95A/1/

the markup:

<figure></figure>

the style

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;
}

这篇关于在图象里面的边界与边际的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！