带有边距的图像内的边框[重复]答案

【问题标题】：Border inside an image with margin [duplicate]带有边距的图像内的边框[重复]
【发布时间】：2025-12-11 07:10:02
【问题描述】：

如何用 CSS 实现这个效果：

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

【问题讨论】：

【解决方案1】：

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

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

}

【讨论】：

【解决方案2】：

你只需要一个带有 :before 或 :after 的元素就可以了

演示：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;
}

【讨论】：

我最终使用了这个的变体。谢谢

【解决方案3】：

在本例中，我会将其设置为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;
}

注意：.border 的 height 包括每个顶部和底部 border 的 5px。

所以 ( 200px 代表 img + 10px 代表顶部和底部 border ) - 20px 顶部和底部 padding = 190px

DEMO

更新

如果您想要% 值而不是固定值，您可以将.border { .. } 中的CSS 修改为：

.border {
    height:100%;
    width:100%;
    border: 5px solid red;
    box-sizing: border-box;
}

DEMO 2

【讨论】：

我不会将边框的高度设置为 190，而是设置为 100%。你的小提琴看起来有点可疑。 This 似乎分布更好

【解决方案4】：

这是一条大道，小提琴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：。图片 { 背景尺寸：封面；背景重复：不重复；背景位置：中心中心；填充：12px；背景颜色：红色；文本对齐：居中；边距：0； } .borderbox { 边框：1px 实心#fff；宽度：100%；高度：100%；边距：0px；背景颜色：透明！重要； }

这样，您将图像应用为 div 的背景元素，然后在创建内部边框的“图像 div”内创建一个额外的 div。 'image div' 正在通过使用其 padding 属性来格式化边框的位置，而内部边框 div 正在拉伸以填充其余空间。

【讨论】：

【解决方案5】：

其他建议似乎更好一些，但可能会在这里发布： 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;
}

【讨论】：