Question

如何使用CSS实现此效果：

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

Answer 1

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

标记：

<figure></figure>

enter image description here

风格

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

Answer 2

我会将其设置为background-image，并将其放置在此示例中的外部div，.img内。然后添加padding。

<强> HTML

<div class="img">
    <div class="border"></div>
</div>

然后添加一个内部div，在此示例中提供边框.border。

<强> CSS

.img {
    width: 400px;
    height: 200px;
    padding: 10px;
    background-image: url('http://www.lorempixel.com/400/200');
}
.border {
    border: 5px solid red;
    height: 190px;
}

注意：height的{{1}}包含.border的每个上下5px。

（ border代表200px + img上下10px 对于顶部和底部border = 20px

， - padding

<强> DEMO

<强>更新

如果您想要190px值而非固定值，则可以在%中将CSS修改为：

.border { .. }

<强> DEMO 2

Answer 3

我认为它不适用于盒子阴影可能是这样的：

http://jsfiddle.net/HgxbM/

<div class="wrap">
    <img src="http://i.stack.imgur.com/1aYLD.jpg" />
    <span class="border"></span>
</div>

的CSS：

.wrap {
    position:relative;
    width:302px;
    height:187px;
}
.border {
    position:absolute;
    top:10px;
    left:10px;
    width:90%;
    height:90%;
    display:block;
    border:solid 1px red;
}

或使用CSS calc() http://jsfiddle.net/HgxbM/4/

.border {
    position:absolute;
    top:0px;
    left:0px;
    margin:15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    display:block;
    border:solid 1px red;

}

Answer 4

其他建议看起来好一点，但可能只是在这里发布： http://jsfiddle.net/HbcRp/1/

<强> HTML：

<div class="image">
    <div class="border">
    </div>
</div>

CSS （注意：背景色仅用于演示）：

.image {
    background-color:rgba(0,0,0,0.8);
    width:300px;
    height:150px;
    position:absolute;
    margin:none;
    padding:none;
}
.border {
    border: solid white 1px;
    height:110px;
    width:260px;
    margin:20px auto auto auto;
    position:relative;
    padding:none;
}

Answer 5

这是一条大道，小提琴http://jsfiddle.net/Lpssz/1/ HTML：

<div class="picture" 
     style="background-image: url(YourPicture.jpg); height: 200px; width: 200px;">
<div class="borderbox"></div>
</div>

CSS： .picture { 背景尺寸：封面; background-repeat：no-repeat; 背景位置：中心; 填充：12px; 背景颜色：红色; text-align：center; 保证金：0; } .borderbox { border：1px solid #fff; 宽度：100％; 身高：100％; 保证金：0px; background-color：transparent！important; }

这样，您将应用图像作为div的背景元素，然后在'image div'中创建一个额外的div，用于创建内部边框。 'image div'使用padding属性格式化边框的位置，内部边框div伸展以填充剩余的空间。

边缘内的边界图像

5 个答案: